javascript - 如何在 angular.js 中将 $filter 与 select 一起使用

Question

如何根据用户选择的值在不同的过滤器之间切换？我有三个过滤器(“largeNumber”、“百分比”、“字节”)，我想根据用户选择的值在这些过滤器之间切换。现在我正在使用我的js代码中的过滤器，请参阅 fiddle ，但它无法按预期工作jsfiddle:

预期输出

当用户输入 1200 并选择大数字时 ==> 1k

查看

<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代码:

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

 }
}

Answer 1

HTML 更改:

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

脚本更改:以下代码就是 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";

您的代码存在问题:

1. $scope.sendSelectedItem 已定义但未调用。那应该有在选择某个项目时调用，并且在选择时，您可以应用所需的过滤器并将结果分配给另一个范围模型变量。

2. $scope.numberData 是一个未格式化的值。如果您将其分配给 h1 标签而不应用过滤器，它将仅显示在输入字段中输入的值。

希望这有帮助。