AngularJS：使用选择和输入过滤记录答案

【问题标题】：AngularJS: filter records using select and inputAngularJS：使用选择和输入过滤记录
【发布时间】：2016-09-27 13:35:58
【问题描述】：

我在使用从选择中选择的输入和过滤参数过滤记录时遇到了一些问题。我看到了很好的例子：angular.js select filter type of input box
但是当我尝试使用 ng-options 进行选择时，它都崩溃了。我的错误是什么？

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

【问题讨论】：

崩溃时遇到什么错误？
没有错误，但过滤器不起作用。

标签： angularjs

【解决方案1】：

select 中的 ng-model 会产生一个对象，因为您使用了 ng-options 的符号。

将您的 getFilter 函数更改为此，它应该可以工作：

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

见this fixed plunker

解决此问题的另一种方法是更改 ng-options 的符号：

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

【讨论】：

非常感谢 :)