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

我正在使用带有过滤器的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>

现在，我想浏览结果并选择其中一项。

更新：这是一种比以前更简单的方法。

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

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

这是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。

尝试这样的操作，ng-repeat的问题在于它会创建子范围，因为您无法访问它

过滤项

从控制器

<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))">

我想出了一个比Andy解决方案更好的版本。在他的解决方案中，ng-repeat监视包含该赋值的表达式。每个摘要循环将计算该表达式并将结果分配给scope变量。

该解决方案的问题在于，如果您在子范围内，则可能会遇到分配问题。这就是为什么您应该在ng-model中加一个点的原因。

对于此解决方案，我不喜欢的另一件事是，它会将过滤后的数组的定义埋在视图标记中的某个位置。如果在视图或控制器中的多个位置使用它，可能会造成混淆。

一个更简单的解决方案是将手表放在您的控制器上进行分配的函数上：

$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4");
});

该功能将在每个摘要循环期间进行评估，因此性能应与Andy的解决方案相当。您还可以在函数中添加任意数量的分配，以将其全部保留在一个位置，而不是分散在视图中。

在视图中，您将直接使用过滤后的列表：

<ul>
    <li  ng-repeat="item in filteredItems">{{item.name}}</li>
</ul>

这是一个小提琴，在更复杂的场景中显示了这一点。

检查以下答案：

在ng-repeat中选择和访问项目

<li ng-repeat="item in ..." ng-click="select_item(item)">