根据选择值筛选angularjs中的结果

这似乎应该很容易，但我是新的角度，并没有掌握这个概念很好。我希望在数据集上运行ng repeat，然后能够使用完全相同的数据集，根据选择框中的选定选项过滤结果

我创建了一个选项数组，并将它们分配给变量$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选项动态创建选择框，并使用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>

{{cat.title}}
输入：{{catFilter.id}--id:{{cat.id}

我以为我可以用下面的方法运行一个过滤器，但是我得到了一个错误。谁能告诉我我做错了什么

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

---

我在这里创建了一个冒号：

在

过滤器之后需要一个冒号。试试这个：

filter:{cat.id:catFilter.value}
您需要在文件管理器中提到直接id，如
id
，它将通过
ourTeamCategories
id进行查找，要获得更准确的结果，请在末尾添加
true
以确保精确匹配，而不是包含并遗漏冒号
：

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

这里
谢谢！我认为你和伊杜森的评论都是正确的，错误已经消失了。但是，它似乎仍然不想在选择相关的选择选项时进行过滤。实际上，我正在使用当前的选择代码将期望值输入到选择选项中。数值为18,19,21,22。当我应用您的更新时，“选择选项”值现在为0,1,2,3，这与我试图完成的筛选无关。@Starfs这是我的错..我错过了几件事。。现在它显然是固定的..看看plunkr&代码更改..@Starfs这取决于您如何在
ng选项中绑定值
现在我使用
filter:{id:catFilter.id}
作为
catFilter
包含整个选定对象..您看过plunkr了吗？让我们看看。
<select name="show-filter" ng-model="catFilter" 
   ng-options="category as category.title for category in ourTeamCategories">
</select>