I am currently working on a People service that utilizes $resource. I make a call to this service from a PeopleCtrl using People.query() in order to retrieve a list of users from a json api. The returned data looks like this:
[
{
"usr_id" : "1"
"first_name" : "lucky"
"awesome" : "true"
},
{
"usr_id" : "6"
"first_name" : "Adolf"
"awesome" : "false"
}
]
In my html file, my goal is to use ng-repeat and filters with this data. Essentially, I have a list of users and I want to be able to filter them using an input field. While I have been able to get the basics to work, whenever I type 'k', it displays all results instead of just those with the letter 'k'. Here is my current setup:
<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>
However, when I attempt to type into the input field, it shows all users. Even when I type the second letter, there is no change. Only when I type the third letter does it actually show the matching records. If I delete characters until only 'k' remains, no records are displayed at all. So I am left wondering where exactly I may be going wrong. The variable 'People' is assigned to the scope and contains the array of user data.