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

AngularJS - how to get an ngRepeat filtered result reference

提问by Shlomi Schwartz

I am using an ng-repeat directive with filter like so:

我正在使用带有过滤器的 ng-repeat 指令，如下所示：

ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"

and I can see the rendered results fine; now I want to run some logic on that result in my controller. The question is how can I grab the result items reference?

我可以很好地看到渲染结果；现在我想在我的控制器中对该结果运行一些逻辑。问题是如何获取结果项引用？

Update:

更新：

---

---

Just to clarify: I'm trying to create an auto complete, I have this input:

只是为了澄清：我正在尝试创建一个自动完成，我有这个输入：

<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">

and then the filtered results:

然后是过滤结果：

<ul>
   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li>
</ul>

now I want to navigate the result and select one of the items.

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

回答by Andrew Joslin

UPDATE: Here's an easier way than what was there before.

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

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

Then $scope.filteredItemsis accessible.

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

回答by kevinjamesus86

Here's the filter version of Andy Joslin's solution.

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

Update:BREAKING CHANGE. As of version 1.3.0-beta.19 (this commit) filters do not have a context and thiswill be bound to the global scope. You can either pass the context as an argument or use the new aliasing syntax in ngRepeat, 1.3.0-beta.17+.

更新：突破性变化。从 1.3.0-beta.19 版本（此提交）开始，过滤器没有上下文，this将绑定到全局范围。您可以将上下文作为参数传递，也可以在ngRepeat1.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);
  };
});

Then in your view

那么在你看来

<!-- 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>

Which gives you access to $scope.filteredItems.

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

回答by imal hasaranga perera

Try something like this, the problem with the ng-repeat is that it creates child scope because of that you can't access

尝试这样的事情，ng-repeat 的问题在于它创建了子作用域，因为您无法访问

filteritems

过滤项目

from the controller

从控制器

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>

回答by Gal Bracha

Update:

更新：

Even after 1.3.0. if you want to put it on the scope of the controller or the parent you cannot do that with assyntax. For example if I have the following code:

即使在 1.3.0 之后。如果你想把它放在控制器或父级的范围内，你不能用as语法来做到这一点。例如，如果我有以下代码：

<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>

the above will notwork. The way to go around it is using the $parentas so:

上面的代码将不会工作。绕过它的方法是使用$parent ，如下所示：

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">

回答by Dave Johnson

I came up with a somewhat better version of Andy's solution. In his solution ng-repeat places a watch on the expression that contains the assignment. Each digest loop will evaluate that expression and assign the result to the scope variable.

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

The problem with this solution is that you might run into assignment issues if you are in a child scope. This is the same reason why you should have a dot in ng-model.

此解决方案的问题在于，如果您在子作用域中，您可能会遇到分配问题。这就是为什么你应该在 ng-model 中有一个点的原因。

The other thing I don't like about this solution is that it buries the definition of the filtered array somewhere in the view markup. If it is used in multiple places in your view or your controller it can get confusing.

我不喜欢这个解决方案的另一件事是它将过滤数组的定义埋在视图标记中的某处。如果它在您的视图或控制器中的多个地方使用，它可能会令人困惑。

A simpler solution is to just place a watch in your controller on a function that makes the assignment:

一个更简单的解决方案是在您的控制器中放置一个手表，用于进行分配的功能：

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

This function will be evaluated during each digest cycle so performance should be comparable with Andy's solution. You can also add any number of assignments in the function to keep them all in one place rather than scattered about the view.

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

In the view, you would just use the filtered list directly:

在视图中，您只需直接使用过滤列表：

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

Here's a fiddle where this is shown in a more complicated scenario.

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

回答by Simon De Uvarow

Check this answer:

检查这个答案：

Selecting and accessing items in ng-repeat

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

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