在 for 循环中过滤答案

【问题标题】：Filtering out in for loop在 for 循环中过滤
【发布时间】：2017-03-11 14:46:37
【问题描述】：

我正在尝试创建一个下拉列表，当我创建它时，我想按字段进行过滤。例如：

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="cost" ng-options="x.cost for x in costs">
    </select>

    </div>

    <script>
    var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
        $scope.costs = [{'cost': 1, 'difficulty' : 3}, {'cost': 2, 'difficulty' : 2}, {'cost': 3, 'difficulty' : 3}];
    });
    </script>

    <p>This example shows how to fill a dropdown list using the ng-options directive.</p>

    </body>
    </html>

在此示例中，我将如何按 difficulty 进行过滤？是否可以做类似的事情

ng-options="x.cost for x in costs where x.difficulty >= 3"

【问题讨论】：

听起来你想使用Angular filter。

标签： javascript angularjs arrays angularjs-filter

【解决方案1】：

像这样使用自定义filter：

  $scope.myFilter = function(x) {
    return x.difficulty >= 3;
  }

并像这样在ng-options 中应用它：

 <select ng-model="cost" ng-options="x.cost for x in costs | filter : myFilter">
 </select>

下面的演示：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.costs = [{
    'cost': 1,
    'difficulty': 3
  }, {
    'cost': 2,
    'difficulty': 2
  }, {
    'cost': 3,
    'difficulty': 3
  }];

  $scope.myFilter = function(x) {
    return x.difficulty >= 3;
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="cost" ng-options="x.cost for x in costs | filter : myFilter">
    </select>

  </div>

  <p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>

</html>

【讨论】：

【解决方案2】：

您可以通过多种方式实现这一目标。 - 使用自定义过滤器 - 在控制器级别过滤列表并相应地将其绑定到视图。

这是你可以做的。

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.data = "Hello";
    $scope.difficulty = 3;
    $scope.costs = [{
      'cost': 1,
      'difficulty': 3
    }, {
      'cost': 2,
      'difficulty': 2
    }, {
      'cost': 3,
      'difficulty': 3
    }];

    $scope.filteredCosts = $scope.costs.filter(function(item) {
      return item.difficulty >= 3
    });

  }
]);

app.filter("difficultyFiler", function() {
  return function(costs, difficulty) {
    return costs.filter(function(item) {
      return item.difficulty >= difficulty
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <select ng-model="cost">
      <option ng-repeat="item in costs">
        {{item.cost}}
      </option>
    </select>

    <select ng-model="cost">
      <option ng-repeat="item in filteredCosts">
        {{item.cost}}
      </option>
    </select>

    <input type="text" ng-model="difficulty" />

    <select ng-model="cost">
      <option ng-repeat="item in costs | difficultyFiler : difficulty">
        {{item.cost}}
      </option>
    </select>
  </div>

  <p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</div>
</div>

【讨论】：