current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
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
1

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. –  zsong Sep 19 '13 at 3:06
    
thanks @sza for cathcing that. I updated the data example –  skift Sep 19 '13 at 7:14

1 Answer 1

up vote 3 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. –  skift Sep 22 '13 at 21:32
    
After hour's of search(almost 4H), i have found you'r answer.It do what i want. –  Dileep stanley Dec 9 '13 at 16:57

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.