ng-repeat和过滤角度的基元数组

时间:2013-12-07 20:33:15

标签: javascript angularjs ng-repeat

我想要做的是按输入值过滤数字/字符串项的数组。我的代码是这样的。

如果$ scope.groups [#]。number是一个对象数组,则过滤器搜索对象的属性。但是我希望在$ index跟踪的情况下过滤我的简单值的简单数组。

这可能吗?对此有何解决方法?或者我还需要使用一个对象数组。

这是我在jsfiddle http://jsfiddle.net/u9y9h/3/

上的示例版本

HTML:

<div ng-app>
<div ng-controller="repeater">
  <input placeholder="number" type="text" ng-model="number">
  <input type="button" ng-click="addItem()" value="Add item"><br>
  <input placeholder="query"  type="text" ng-model="query">
  <div ng-repeat="group in groups">
    <h3>{{group.title}}</h3>
    <ul>
      <li ng-repeat="item in group.numbers track by $index | filter:query">{{item}}</li>
    </ul>      
  </div>
</div>
</div>

JS:

function repeater($scope) {
  $scope.items = [];
  $scope.groups = [{
    title: 'even',
    numbers: []
  }, {
    title: 'odd',
    numbers: []
  }];

  $scope.addItem = function () {
    if ($scope.number % 2 == 0) {
      $scope.groups[0].numbers.push($scope.number);
    } else {
      $scope.groups[1].numbers.push($scope.number);
    }
    $scope.number = '';
  }
}

1 个答案:

答案 0 :(得分:9)

track by应该来自filter item in items | filter:searchText track by item.id,如angular docs中的<{3}}:

  

<li ng-repeat="item in group.numbers track by $index | filter:query"> 是一种模式   可能用于将过滤器应用于与a结合使用的项目   跟踪表达。

所以切换

<li ng-repeat="item in group.numbers | filter:query track by $index ">{{item}}</li>

{{1}}

你已经定下来了。

Updated fiddle