AngularJS – 如何获得一个ngRepeat过滤的结果参考
我正在使用filter的ng-repeat指令，如下所示：
ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4" 我可以看到渲染效果很好; 现在我想在我的控制器上运行一些逻辑。 问题是如何获取结果项目的参考？
更新：
只是澄清：我试图创build一个自动完成，我有这样的input：
<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>
现在我想浏览结果并select其中一个项目。
更新 ：这比以前有一个更简单的方法。
<input ng-model="query"> <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))"> {{item}} </div>
然后$scope.filteredItems是可访问的。
这是Andy Joslin解决scheme的过滤版本。
更新：发生变化。 从版本1.3.0-beta.19（ 此提交 ）filter没有上下文， this将被绑定到全局范围。 您可以将上下文作为parameter passing，也可以在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 。
尝试这样的事情，与ng-repeat的问题是，它创build子范围，因为你无法访问
filteritems
从控制器
<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>
更新：
即使在1.3.0之后。 如果你想把它放在控制器或父类的范围，你不能用as语法来完成。 例如，如果我有以下代码：
<div>{{labelResults}}</div> <li ng-repeat="label in (labels | filter:query | as labelResults)"> </div>
以上将无法正常工作。 绕过它的方法是使用$ parent，如下所示：
<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">
我想出了一个更好的安迪解决scheme。 在他的解决scheme中，ng-repeat将监视包含该赋值的expression式。 每个摘要循环将评估该expression式并将结果分配给作用域variables。
这个解决scheme的问题是，如果你在一个子范围内，你可能遇到赋值问题。 这与你在ng模型中应该有一个点的原因是一样的。
我不喜欢这个解决scheme的另一件事是它在视图标记中的某个地方掩盖了被过滤的数组的定义。 如果在你的视图或你的控制器的多个地方使用它，可能会引起混淆。
一个更简单的解决scheme就是在你的控制器上放置一个监视器来执行一个赋值任务：
$scope.$watch(function () { $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4"); });
此function将在每个摘要周期进行评估，因此性能应与安迪的解决scheme相媲美。 您也可以在函数中添加任意数量的任务，将它们全部放在一个位置，而不是分散在视图中。
在视图中，您可以直接使用过滤列表：
<ul> <li ng-repeat="item in filteredItems">{{item.name}}</li> </ul>
这是一个更复杂的情况下显示的小提琴。
检查这个答案：
在ng-repeat中select和访问项目
<li ng-repeat="item in ..." ng-click="select_item(item)">
