根据 select 值过滤 angularjs 中的结果

Question

这看起来应该很容易，但我是 angular 的新手，并没有很好地掌握这个概念。我希望运行对数据集进行 ng-repeat，然后能够使用完全相同的数据集根据 select 框中的 selected 选项过滤结果。

我创建了一个选项数组并将它们分配给变量 $scope.OurTeamCategories。

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
   $scope.ourTeamCategories = [
        {"id":18,"title":'Management'},
        {"id":19,"title":'Administration'},
        {"id":21,"title":'Designers'},
        {"id":22,"title":'Accounts'},
    ]
}]);

然后在 HTML 文件中，我使用 ng-options 动态创建 select 框，并使用 ng-repeat 创建这些类别的列表。这一切都很好，但现在我希望能够过滤

<div ng-app="app">
  <div ng-controller="Main">
    <select name="show-filter"  ng-model="catFilter" ng-options="category.title for category in ourTeamCategories">
          <option value="{{category.id}}"></option>
      </select>

  <li ng-repeat="cat in ourTeamCategories">
      <h3>{{cat.title}}</h3>
      <!-- for testing -->
     <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}}
  </li>
   </div>
</div>

我原以为我可以通过以下方式运行筛选器，但出现错误。谁能告诉我我做错了什么？

<li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}">

我在这里创建了一个 plunker：http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

Answer 1

filter 后需要一个冒号。试试这个：

filter: {cat.id:catFilter.value}

Answer 2

您需要在您的文件管理器中提及直接 ID，例如 id，它将通过 ourTeamCategories id 进行查找，为了获得更准确的结果，请在末尾添加 true 以确保准确匹配而不是包含 & 还漏掉了冒号 :

<li ng-repeat="cat in ourTeamCategories | filter : {id: catFilter.id}: true">

更新

您同时混淆了两种方法，例如 ng-options 和 ng-repeat。我认为你应该坚持使用 ng-options，所以在你当前的 ng-option 中，它在你的 ng-model

中设置 title 值

<select name="show-filter" ng-model="catFilter" 
   ng-options="category as category.title for category in ourTeamCategories">
</select>

Forked Plunkr这里

根据 select 值过滤 angularjs 中的结果

Filter results in angularjs based on select value

angularjs

angularjs-ng-repeat

ng-options

angular-filters