Angular js: Access data filtered in ng-repeat (ngRepeat) from controller

Question

I need to access data that was already filtered on a template (inside a ng-repeat) from my controller.

Here's what I mean:

I have this table in my template:

 <table class="table">
        <thead>
            <th>Name</th>
            <th>Gender</th>
        </thead>
        <tbody>
            <tr ng-repeat="person in persons | filter:query">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
</table>

Then I have a <select> that is used to filter data by gender

<h1>Cluster:</h1>
    <select ng-model="query.gender" >
        <option value ="">ALL</option>
        <option value ="male">Male</option>
        <option value ="female">Female</option>
    </select>

This works ok.

If someone selects one of the options, I need to do something with the filtered results. That's why I have a $watch in my controller that looks for changes to the filter query:

$scope.$watch('query.gender', function(newValue, oldValue) {
            // Here is where I need to get filtered results
});

My question is:

How do I access the FILTERED content from the controller?

I'd like this preferably without having to do another "filtering" operation in the controller... (since the data was already filtered, the result is sitting somewhere in memory, right?)

I don't think the result is sitting in memory, no. ng-repeat filters the collection and generate a dom element for every accepted person, and that's all. — JB Nizet
– JB Nizet, Commented Feb 1, 2014 at 14:19

Artyom Pranovich · Accepted Answer · 2015-08-21 14:13:39Z

13

You can simplify your code with the following:

    <tbody>
        <tr ng-repeat="person in (filteredPersons = (persons | filter:query))">
            <td>{{person.name}}</td>
            <td>{{person.gender}}</td>
        </tr>
    </tbody>

After that, you can get access to $scope.filteredPersons into controller or {{filteredPersons}} right into the view :)

edited Aug 21, 2015 at 14:13

answered Feb 2, 2014 at 9:33

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lakshay Dulani Over a year ago

this solution looks better to me

Willians Martins Over a year ago

obs, sometimes you need to envelop your model to see the right result like object. filteredPersons, object. persons, etc (this way, works to me)

mylescc · Accepted Answer · 2014-02-01 14:52:09Z

5

I'm not entirely sure, but you can use the filter function in your controller. So try something like:

$scope.$watch('query.gender', function(newValue, oldValue) {
        var x = $filter('filter')($scope.persons, $scope.query);
});

x should then contain the same filtered data as in your table I think. Have a look at the docs here: http://docs.angularjs.org/api/ng.filter:filter for some more info.

edited Feb 1, 2014 at 14:52

answered Feb 1, 2014 at 14:26

mylescc

7,0393 gold badges19 silver badges23 bronze badges

6 Comments

JB Nizet Over a year ago

The second argument should be $scope.query, not $scope.query.gender

mylescc Over a year ago

Hmm ok, Just going to do a bit more investigation. I think I wrote the wrong code for using hte $filter function.

mylescc Over a year ago

Ah ok! Just updated my code again, but I'll revert it back. So it worked with $scope.query?

Nahn Over a year ago

I guess that if there is no way of getting the already-filtered data from memory, this is the correct answer. I wanted to get the best performance. Thanks a lot!!!

JB Nizet Over a year ago

@mylescc: you should also simply manually filter the collection in your controller when a radio button is clicked, and save the result in a scope field, and iterate over this field in ng-repeat. This would avoid the double filtering. But I doubt filtering twi would make any significant performance difference, unless the collection is huge.

|

Collectives™ on Stack Overflow

Angular js: Access data filtered in ng-repeat (ngRepeat) from controller

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related