Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a People service using $resource, which I call from a PeopleCtrl using People.query() to get a list of user from a json api. The data comes back like so:

[
  {
    "usr_id" : "1"
    "first_name" : "lucky"
    "awesome" : "true"
  },
  {
    "usr_id" : "6"
    "first_name" : "Adolf"
    "awesome" : "false"
  }
]

and in my html, i want to use ng-repeat, and filters with that data. the idea is I have a list of users, and I want to filter them from an input field. I can get the basic to work, but as soon as I type in 'k', it shows all results, rather than only those with the letter 'k'. This is what I have:

  <div id="section-body" ng-controller="PeopleSearchCtrl">

    <input type="text" ng-model="search.first_name" placeholder="Search Your Name">

    <center>
      <table ng-show="(filteredData = (People | filter:search)) && search.first_name && search.first_name.length >= 1">
        <tr ng-repeat="per in filteredData" ng-click="search.first_name = per.first_name + ' ' + per.last_name">
          <td>{{per.per_id}}</td>
          <td>{{per.first_name + " " + per.last_name}}</td>
        </tr>
      </table>
    </center>
    <button class="btn btn-large btn-primary" type="button">Submit</button>

  </div>

But as soon as I try to type in the input, it shows all users. type second letter, no change, type third letter, only shows the matching records. delete characters until only 'k' is remaining, no records show. So I am wondering how it is that I am doing this wrong. The 'People' variable is assigned to the scope, and is the resulted data array of users.

share|improve this question
 
Make sure you post the correct code so people can help you. Obviously the data you posted doesn't contain "first_name" field and it is being used by the template. –  sza Sep 19 at 3:06
 
thanks @sza for cathcing that. I updated the data example –  luckysmack Sep 19 at 7:14

1 Answer

up vote 1 down vote accepted

Here's how it works. It's pretty easy once you figure it out.

<input ng-model="query">

<table id="productList" ng-show="(products|filter:query).length">
  <tr ng-repeat="product in products|filter:{username:query}">
...
share|improve this answer
 
This did the trick. I needed to do a few minor tweaks for what I needed, but this is exactly what got it working for me, thanks. –  luckysmack Sep 22 at 21:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.