How can I get filtered data objects from AngularJS?

Question

i have trouble to figure out how i can receive the filtered data after the change event took place. My code structure looks like the following. THe alert is fired but how to move on?

<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

</head>


<body ng-controller="List">

    Search: <input ng-change="getData()" ng-model="query">
    Search: <select ng-change="getData()" ng-model="query2">
    <option></option>
    <option>Berlin</option>
    <option>Hamburg</option>
</select>
 <div>
    <ul class="names" >
        <li ng-model="item" " ng-repeat="name in names | filter:query | filter:query2">
            {{name.firstname}}, {{name.lastname}}, {{name.age}}, {{name.location}}
        </li>
    </ul>
</div>
    <script type="text/javascript">
    function List($scope) {
        $scope.names = [
        {"firstname": "Carl",
        "lastname": "Luyk",
        "age": 20,
        "location":"Berlin"},
        {"firstname": "Carl",
        "lastname": "Moreen",
        "age": 20,
        "location":"Hamburg"},
        {"firstname": "Tom",
        "lastname": "Luyk",
        "age": 25,
        "location":"New York"},
        {"firstname": "Caren",
        "lastname": "Tilt",
        "age": 20,
    "location":"Paris"},
        {"firstname": "Caren",
        "lastname": "Orail",
        "age": 30,
        "location":"Hamburg"},
        ];
    $scope.getData= function(){
    //here I would like to get the data structured like $scope.names..is that possible?
    alert('changed');

    }

    }
    </script>

</body>
</html>

You could filter the list in Javascript instead of using HTML template binding. See docs.angularjs.org/api/ng.filter:filter — Ian Mercer
– Ian Mercer, Commented May 22, 2013 at 5:07
Possible duplicate of Angular js: Access data filtered in ng-repeat (ngRepeat) from controller — Abhijeet
– Abhijeet, Commented Apr 19, 2017 at 10:53

SergeL · Accepted Answer · 2013-05-22 15:05:04Z

7

Try this:

Search: <input ng-change="getData(names, query)" ng-model="query">

And inside your Controller:

$scope.getData = function (names, query) {
  $scope.queryData = $filter('filter')(names, query));
};

So $scope.queryData is now your results collection.

answered May 22, 2013 at 15:05

SergeL

6805 silver badges8 bronze badges

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

3 Comments

Jurudocs Over a year ago

thanks a lot...but it raises the error "$filter is undefined" any idea?

Andre Over a year ago

@Jurudocs not sure if you ever figured it out, but that is because you need to inject $filter into your controller.

aendra Over a year ago

This will throw a syntax error due to an unclosed parenthesis on line 2.

Faishal · Accepted Answer · 2013-05-23 21:28:26Z

3

The reason you're getting "$filter is underfined" is because you haven't injected it into your controller. When you define your controller, do:

app.controller('list', function($scope, $filter) {
  $scope.getData = function (names, query) {
    $scope.queryData = $filter('filter')(names, query));
  };
}

You can also define your search in your controller.

$scope.queryData = $filter('filter')(array, search-expression));

Hope that helps!

edited May 23, 2013 at 21:28

Faishal

1,4931 gold badge14 silver badges23 bronze badges

answered May 23, 2013 at 17:35

Ziggles

392 bronze badges

3 Comments

Tjorriemorrie Over a year ago

So will search-expression be equal to query?

Uday Sawant Over a year ago

$filter('filter')(array, search-expression)) The extra closing bracket, is it a typo??

aendra Over a year ago

@UdaySawant Yeah, the fact it's in two answers is pretty sad. Downvoting until fixed!

Collectives™ on Stack Overflow

How can I get filtered data objects from AngularJS?

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related