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

javascript angularjs filter angularjs-ng-repeat

2022-08-30 04:36:39

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

现在我想导航结果并选择其中一个项目。

答案 1

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

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

然后可访问。$scope.filteredItems

答案 2

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

更新：重大更改。从版本 1.3.0-beta.19（此提交）开始，筛选器没有上下文，将绑定到全局范围。您可以将上下文作为参数传递，也可以在 ngRepeat， 1.3.0-beta.17+ 中使用新的别名语法。this

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