根据选择值筛选出角度

这似乎应该是容易的,但我是新来的角度,而不是很好地抓住这个概念.我希望通过数据集运行一个ng重复,然后可以使用完全相同的数据集在选择框中根据选定的选项过滤结果.

我创建了一个选项数组,并将它们分配给变量$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>

我以为我可以通过以下方式运行一个过滤器,但是我收到一个错误.有谁能告诉我我做错了什么？

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

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

你需要提到你的文件管理器中的直接id,如id,可以通过我们的TeamCategories id&为了更准确的结果,确实添加到最终将确保精确匹配,而不是包含&也错过了冒号：

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

更新

您正在混合两种方法,如ng-选项与ng重复.我想你应该坚持使用ng选项,所以在您当前的ng选项中,在您的ng模型中设置标题值

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

Forked Plunkr这里

原文地址：https://www.jb51.cc/angularjs/140779.html