Фильтрация результатов в angularjs на основе выбранного значения

Кажется, что это должно быть легко, но я новичок в angular и не очень понимаю эту концепцию. Я надеюсь запустить 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-options и использую 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

Ответ 1

Вам нужно указать прямой идентификатор в вашем файле, например id, который будет искать через ourTeamCategories id, и для более точного результата добавьте true в конце, чтобы обеспечить точное совпадение, а не содержать, а также пропущенный двоеточие :

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

Обновление

Вы смешиваете два подхода одновременно с ng-options с ng-repeat. Я думаю, вы должны придерживаться ng-options, поэтому в вашей текущей ng-опции, которая устанавливает значение title в вашем ng-model

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

Forked Plunkr здесь

Ответ 1

Ответ 2