Is there a way to switch between different filters based on the user's selected values? I have three filters ('largeNumber', 'Percentage', 'Bytes') and I want to toggle between these filters based on the selection made by the user. Currently, I am trying to implement the filter in my JavaScript code, but it is not functioning as expected. See the jsfiddle for reference.
Expected Output:
For example, if the user inputs 1200 and selects 'Large Numbers,' the expected output should be 1k.
View:
<div ng-controller="MyCtrl">
<form role="form" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="sample" ng-model="numberData" placeholder="Enter Number">
<select class="form-control inline" id="format" ng-model="numberType"
ng-options='type for type in selectType' ng-change="selected()">
<option style="display:none" value="" class='formOptions'>select a type</option>
</select>
</div>
</form>
<h1> data here: {{numberData}}</h1>
</div>
JavaScript Code:
var myApp = angular.module('myApp',[]);
myApp.filter('largeNumber', function(){
return function(number, decPlaces) {
...
return number;
}
})
function MyCtrl($scope, $filter) {
$scope.selectType = ['Large Number', 'Percentage', 'Bytes']
$scope.selected = function() {
console.log($scope.numberType)
return $scope.numberType
};
$scope.selectedType = $scope.selected()
$scope.sendSelectedItem = function(){
if($scope.selectedType == "Large Number"){
return $filter('largeNumber')(0)
}
}
}