AngularJS: filter records using select and input

Question

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

Which error you get when crashing?

acostela
– acostela

2016-09-27 13:38:03 +00:00
Commented Sep 27, 2016 at 13:38 — acostela
– acostela, Commented Sep 27, 2016 at 13:38
No errors, but filter doesn't work.

kipris
– kipris

2016-09-27 13:39:19 +00:00
Commented Sep 27, 2016 at 13:39 — kipris
– kipris, Commented Sep 27, 2016 at 13:39

devqon · Accepted Answer · 2016-09-27 13:48:45Z

2

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"

edited Sep 27, 2016 at 13:48

answered Sep 27, 2016 at 13:43

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kipris Over a year ago

Thanks you a lot :)

Collectives™ on Stack Overflow

AngularJS: filter records using select and input

HTML

JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related