CODEWITHSUNDEEP
angularjs
kipris
kipris

Reputation: 3039

AngularJS: filter records using select and input

I have some problems with filtering records using input and filter parameter I choose from select. I saw nice example: angular.js select filter type of input box
But when I try to use ng-options for select it all crashed. What is my mistake?

HTML

<select ng-model="filter" ng-options="item.key for item in param track by item.value">      
</select>
<input ng-model="query" />
<ul>
   <li ng-repeat="person in persons | filter: getFilter()"> firstname: {{person.firstname}}, lastname: {{person.lastname}}
   </li>
</ul>


JS

  $scope.persons = [
      {firstname: 'Tom', lastname: 'Mann'},
      {firstname: 'Gil', lastname: 'Jeff'},
      {firstname: 'Kit', lastname: 'Tio'}
  ];

  $scope.param = [
    {value: 'firstname', key: 'First Name'},
    {value: 'lastname', key: 'Last Name'}
    ];

  $scope.filter = $scope.param[0];          

  $scope.getFilter = function() {
      var filter = {};
      filter[$scope.filter] = $scope.query;
      return filter;
  };

http://plnkr.co/edit/L6lSuF2S249d5pDsKEx9?p=preview

Upvotes: 0

Views: 773

Answers (1)

devqon
devqon

Reputation: 13997

Your ng-model of the select results in an object, because of your notation of the ng-options.

Change your getFilter function to this and it should work:

$scope.getFilter = function() {
    var filter = {};
    // $scope.filter is equal to {value: 'firstname', key: 'First Name'}
    filter[$scope.filter.value] = $scope.query;
    return filter;
};

See this fixed plunker

Another way to fix this is to change the notation of the ng-options in this:

ng-options="item.value as item.key for item in param track by item.value"

Upvotes: 2

Related Questions