在Angularjs中按对象属性过滤

Question

I'm trying to create a simple filter in AngularJS that will filter through my JSON: first_name, last_name and phone_number, but i'm not sure how to reference specific properties in my JSON to create the HTML dropdown.

HTML

<div ng-app="instantsearch">
    <div ng-controller="instantSearchCtrl">
            <input type="text" class="search" ng-model="searchString" placeholder="Enter your search terms" />

            <select class="data-ctrl" >
              <option ng-repeat="i in items | filter:searchString" value="@{{ i.clientid }}">@{{ i.first_name }} @{{ i.last_name }}</option>
            </select>
    </div>
</div>

JSON

{"clients":
[
{"clientid":"1","first_name":"myfirst","last_name":"client","phone_number":"","email":""},
{"clientid":"2","first_name":"mysecond","last_name":"client","phone_number":"","email":""},
{"clientid":"3","first_name":"mythird","last_name":"client","phone_number":"","email":""},
{"clientid":"4","first_name":"myfourth","last_name":"client","phone_number":"","email":""}
]}

JS

var app = angular.module('instantsearch',[]);

app.controller('instantSearchCtrl',function($scope,$http){
    $http.get('/api/clients').success(function(data, status, headers, config) {
        $scope.items = data.data;
    }).error(function(data, status, headers, config) {
        console.log("No data found..");
  });
});


app.filter('searchFor', function(){
    return function(arr, searchString){
        if(!searchString){
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item){
            if(item.first_name.toLowerCase().indexOf(searchString) !== -1){
            result.push(item);
        }
        });
        return result;
    };
});         

Answer 1

You problem is actually not in how you are configuring dropdown but in controller code. According to your JSON it should be:

$scope.items = data.clients;

However, one more improvement you can make is to use ngOptions instead of ngRepeat. So dropdown will become

<select class="data-ctrl" 
    ng-model="client"
    ng-options="i.clientid as ('@' + i.first_name + ' @' + i.last_name) for i in items | filter:searchString">
</select>