AngularJS-如何获取ngRepeat过滤结果参考

Question

我正在使用带有过滤器的ng-repeat指令，如下所示：ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"我可以看到渲染结果很好；现在我想在控制器上对该结果运行一些逻辑。问题是如何获取结果项引用？更新：只是为了澄清一下：我正在尝试创建自动完成功能，我输入以下内容：<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">然后过滤的结果：<ul>   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li></ul>现在，我想浏览结果并选择其中一项。

Answer 1

这是一个比以前更简单的方法。

 <input ng-model="query">

 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">

   {{item}}

 </div>

然后$scope.filteredItems是可访问的。

Answer 2

这是Andy Joslin解决方案的过滤器版本。

更新： BREAKING CHANGE。从1.3.0-beta.19版本开始（此commit），过滤器没有上下文，并且this将绑定到全局范围。您可以将上下文作为参数传递，也可以在ngRepeat 1.3.0-beta.17 +中使用新的别名语法。

// pre 1.3.0-beta.19

yourModule.filter("as", function($parse) {

  return function(value, path) {

    return $parse(path).assign(this, value);

  };

});

// 1.3.0-beta.19+

yourModule.filter("as", function($parse) {

  return function(value, context, path) {

    return $parse(path).assign(context, value);

  };

});

然后在您看来

<!-- pre 1.3.0-beta.19 -->

<input ng-model="query">

<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:'filteredItems'">

 {{item}}

</div>

<!-- 1.3.0-beta.19+ -->

<input ng-model="query">

<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:this:'filteredItems'">

 {{item}}

</div>

<!-- 1.3.0-beta.17+ ngRepeat aliasing -->

<input ng-model="query">

<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 as filteredItems">

 {{item}}

</div>

这使您可以访问$scope.filteredItems。