AngularJS-如何获得一个 ng 重复过滤的结果引用

我使用的是带有如下过滤器的 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>

现在我要浏览结果并选择其中一个项目。

82573 次浏览
小开
最佳答案

更新 : 这里有一个比以前更简单的方法。

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

然后就可以访问 $scope.filteredItems了。

小开

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

更新: 破坏性改变。从1.3.0版本开始，beta.19(这个承诺)过滤器没有上下文，而且 this将绑定到全局范围。您可以将上下文作为参数传递，也可以在 重复,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。

小开

我想出了一个稍微好一点的安迪解决方案。在他的解决方案中，n- 重复在包含赋值的表达式上放置一块表。每个摘要循环将计算该表达式并将结果赋给 scope 变量。

这个解决方案的问题是，如果您在子范围中，可能会遇到赋值问题。这也是为什么你应该有一个 模型中的点的原因。

我不喜欢这个解决方案的另一点是，它将过滤数组的定义隐藏在视图标记中的某个地方。如果它在视图或控制器中的多个位置使用，则可能会造成混淆。

一个更简单的解决方案是在你的控制器中放一块手表在一个函数上进行赋值:

$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- 重复的问题在于它创建了子范围，因为您无法访问它

过滤项目

从控制器

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

更新:

即使在1.3.0之后。如果你想把它放在控制器的作用域或者父节点上，你不能用 作为语法这样做。 例如，如果我有以下代码:

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

以上将 没有工作。 绕过它的方法是使用 $父母，如下所示:

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

看看这个答案:

在 ng- 重复中选择和访问项

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

提交答案