javascript - AngularJS 通过内联表达式过滤

Question

我正在尝试添加一个内联 Angular 过滤器，该过滤器通过计算结果为 true 或 false 的表达式进行过滤。这是我的 JS:

angular.module('programApp', [
    'programApp.controllers',
]);
angular.module('programApp.controllers', [])
    .controller('programController', ['$scope', '$filter',  
    function($scope, $filter){

      $scope.advancedFilters = 1;

      $scope.bars = [
        {'name':'First',
          'id':1},
        {'name':'Second',
          'id':2},
        {'name':'Third',
          'id':3},
        {'name':'Fourth',
          'id':4},
        {'name':'Fifth',
          'id':5}];
    }]);

这是我的 HTML:

<div ng-app="programApp" ng-controller="programController">
  <label>Level: 
    <select ng-model="advancedFilters">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </label>

  <div ng-repeat="bar in bars | filter:advancedFilters <= bar.id">
    <h3>{{bar.name}}</h3>
  </div>
</div>

您可以看到我如何尝试根据 advanceFilters 下拉列表中的内容来过滤 ng-repeat 栏。然而，当我尝试添加一个计算结果为 true 或 false 的过滤器到 ng-repeat 时，我会抛出一个 Angular 错误。

我想避免在这种情况下创建自定义函数。如果可能，过滤器应保持在 HTML 中内联。

这看起来很简单，但行不通。我在这里做错了什么？

这是一个代码笔:http://codepen.io/trueScript/pen/LVZKEo

Answer 1

如果您确实想避免使用 Controller ，您可以使用 ngInit 指令来创建 comparator表达式，它将在每次迭代时重新初始化。像这样的事情:

<div ng-init="test = bar.id >= advancedFilters" 
     ng-repeat="bar in bars | filter:{id:advancedFilters}:test">
    <h3>{{bar.name}}</h3>
</div>

演示: http://codepen.io/anon/pen/eNBeqb