AngularJS searching by nested data

Question

I am new to AngularJS. I am trying to get a simple search based on the users name, which in my case is not stored on the top most layer. Here is the example:

<div ng-init="users = [
{'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
{'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
</div>

Here is the plnkr that searches all the fields I want to take this and make it such that it only searches fields.name. In this plunker, I could type "dog" and still get the second user returned, which is not what I want.

I tried changing my input ng-model to search.fields.name but when I do that, the search doesn't activate at all. I can type in any string into the text box and nothing is filtered out.

What am I missing? Thank you!

EDIT: Full code since plunker is currently down:

<!doctype html>
<html ng-app="App">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>

    <div ng-init="users = [
      {'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
      {'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
    </div>    

    Name only <input ng-model="search.fields"><br>

    <table id="userTable">
      <tr ng-repeat="user in users | filter:search">
        <td>{{user}}</td>
      </tr>
    </table>    

  </body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Plnkr is not running right now, but if you have an ng-repeat which you want to filter, then look at the official docs, especially upvoted comments are useful: http://docs.angularjs.org/api/ng.filter:filter

item in myArray | filter:{propertyThatWillBeFiltered: value}

If you are talking about searching inside your model, then you should use "filter" method on an array.

edited May 23 '17 at 12:05

Community

1
1

answered Oct 29 '13 at 15:09

Capaj

4,024
2
43
56

I added the code above. I am using an ng-repeat but I'm trying to figure out what the filter value would be. The example in the angular documentation assumes that the data is on the top level and I just can't get it to work with the users data structure – Korra Oct 29 '13 at 15:20
I have forked and modified your plunk: http://plnkr.co/edit/Wj4cUS?p=preview there you can exactly see how to write the filter expression. – Capaj Oct 29 '13 at 21:12

AngularJS searching by nested data

1 Answers1