How to use $filter with select in angular.js

Question

How can I toggle between diffrent filters based on the values selected by the user? I have three filters ('largeNumber', 'Percentage', 'Bytes') and I want to toggle between these filters based on the value selected by the user. Right now I am using filter from my js code see fiddle however it does not work as expected jsfiddle:

expected output

when the user types in 1200 and selected Large Numbers ==> 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>

Js code:

var myApp = angular.module('myApp',[]);

myApp.filter('largeNumber', function(){
    return function(number, decPlaces) {
    var orig = number;
    var dec = decPlaces;
    // 2 decimal places => 100, 3 => 1000, etc
    decPlaces = Math.pow(10, decPlaces);

    // Enumerate number abbreviations
    var abbrev = ["k", "m", "b", "t"];

    // Go through the array backwards, so we do the largest first
    for (var i = abbrev.length - 1; i >= 0; i--) {

        // Convert array index to "1000", "1000000", etc
        var size = Math.pow(10, (i + 1) * 3);

        // If the number is bigger or equal do the abbreviation
        if(size <= Math.abs(Math.round(number))) {
            // Here, we multiply by decPlaces, round, and then divide by decPlaces.
            // This gives us nice rounding to a particular decimal place.
            var number = Math.round(number * decPlaces / size) / decPlaces;

            // Handle special case where we round up to the next abbreviation
            if((number == 1000) && (i < abbrev.length - 1)) {
                number = 1;
                i++;
            }

            // console.log(number);
            // Add the letter for the abbreviation
            number += abbrev[i];

            // We are done... stop
            break;
        }
    }

    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)
  }

 }
}

What should it happen, i am missing a point here... when user types 1200 should the drop-down show largeNumbers? — Thalaivar
– Thalaivar, Commented Aug 15, 2016 at 10:21
if the user types 1200 And selects Large Numbers from the dropdown list then the filter should apply — Imo
– Imo, Commented Aug 15, 2016 at 10:25
at this h1 <h1> data here: {{numberData}}</h1> see in HTML area. — Imo
– Imo, Commented Aug 15, 2016 at 10:33
plnkr.co/edit/bR1p1FnnAtnlKNYQdPPt?p=preview you could do something like this... — Thalaivar
– Thalaivar, Commented Aug 15, 2016 at 10:43

Parthasarathy · Accepted Answer · 2016-08-15 11:55:04Z

HTML changes:

<h1> data here: {{numberDataFormatted}} </h1>

Script Changes: The following code is all you need in the controller.

$scope.selectType = ['Large Number', 'Percentage', 'Bytes'];

$scope.sendSelectedItem = function() {
  if ($scope.numberType == "Large Number") {
    return $filter('largeNumber')($scope.numberData, 0);
  }
  // Handle other types or defaults here
}

$scope.selected = function() {
  $scope.numberDataFormatted = $scope.sendSelectedItem();
};

// Set the initial type
$scope.numberType = "Large Number";

Problems with your code:

$scope.sendSelectedItem is defined but not invoked. That should have been invoked when an item is selected and on selection, you can apply the required filter and assign the result to another scope model variable.
$scope.numberData is an unformatted value. If you assign it to the h1 tag without applying a filter, it will just display the value entered in the input field.

Hope this helps.

Collectives™ on Stack Overflow

How to use $filter with select in angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related