2015-09-10 3 views
1

Я пытаюсь создать простой фильтр в AngularJS, который будет фильтровать через мой JSON: first_name, last_name и phone_number, но я не уверен, как ссылаться на определенные свойства в моем JSON для создания Выпадающий список HTML.Отфильтровать по объекту в Angularjs

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; 
    }; 
});   
+0

Итак, что именно вы хотите иметь в выпадающем списке? Как это теперь '@ {{i.first_name}} @ {{i.last_name}}'? – dfsq

+0

Да, я хотел бы отображать first_name и last_name в раскрывающемся списке, но используйте clientid как значение. Прямо сейчас ничего не отображается. @ {{Для фреймворка Laravel для игнорирования {{ – user3489502

ответ

0

Вы проблема на самом деле не в том, как вы настраиваете выпадающий список, но в коде контроллера. По вашему JSON это должно быть:

$scope.items = data.clients; 

Однако еще одно улучшение вы можете сделать, это использовать ngOptions вместо ngRepeat. Таким образом, выпадение станет

<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> 
+0

Он работает, выбор/опция заполняется моими данными, но ввод в поле ввода не влияет? – user3489502

+0

Понял, я изменил ng-model = "client" на ng-model = "searchString". благодаря – user3489502

Смежные вопросы