AngularJS - how to get an ngRepeat filtered result reference

Question

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.

Answer 1

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.filteredItems is accessible.

Answer 2

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.

Answer 3

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>

Answer 4

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

Answer 5

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.

Answer 6

Check this answer:

Selecting and accessing items in ng-repeat

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