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>

您可以根据advancedFilters下拉菜单中的内容查看我是如何尝试过滤条形重复的。但是，当我尝试向ng-repeat添加一个计算结果为true或false的过滤器时，我会抛出一个角度误差。

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

这看起来很简单，但它不起作用。我在这做错了什么？

这是一个codepen：http://codepen.io/trueScript/pen/LVZKEo

Answer 1

如果您真的想避免使用控制器，可以使用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

AngularJS按内联表达式过滤

1 个答案: