admin管理员组文章数量:1134660
I am using an ng-repeat directive with filter like so:
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.
I am using an ng-repeat directive with filter like so:
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.
Share Improve this question edited Nov 25, 2017 at 22:12 Damjan Pavlica 33.9k10 gold badges75 silver badges78 bronze badges asked Jul 30, 2012 at 12:45 Shlomi SchwartzShlomi Schwartz 8,88330 gold badges119 silver badges198 bronze badges6 Answers
Reset to default 274UPDATE: 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.filteredItems
is accessible.
Here's the filter version of Andy Joslin's solution.
Update: BREAKING CHANGE. As of version 1.3.0-beta.19 (this commit) filters do not have a context and this
will 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+.
// 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
.
Try something like this, the problem with the ng-repeat is that it creates child scope because of that you can't access
filteritems
from the controller
<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>
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 as syntax. For example if I have the following code:
<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>
the above will not work. The way to go around it is using the $parent as so:
<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">
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.
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.
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.
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.
Check this answer:
Selecting and accessing items in ng-repeat
<li ng-repeat="item in ..." ng-click="select_item(item)">
本文标签: javascriptAngularJShow to get an ngRepeat filtered result referenceStack Overflow
版权声明:本文标题:javascript - AngularJS - how to get an ngRepeat filtered result reference - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1736791897a1953125.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论