1

Есть селект в модель которого попадает число 1,2,3,4... Есть объект со свойством tags = [2,5] Есть вывод этого объекта через ng-repeat, как сделать фильтр который вернет только те элементы которые будут удовлетворять условию выбора из селекта

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

Ссылка http://plnkr.co/edit/Yr16nx2kuZR21OTzcwAU?p=preview

1
  • добавьте разметку и контроллеры, которые вы использует
    – Grundy
    17 янв 2016 в 15:48

1 ответ 1

0

Фильтру в ангуляре можно задать конкретное поле по которому фильтровать. В документации к $filter указано, что для этого необходимо передать параметром объект, в котором ключи - это поля по которым будет производится поиск.

конкретно в данном случае нужно заменить

filter :selectTag

на

filter : {'tags':selectTag}

Пример:

angular.module('app', [])
  .controller('Main', ['$scope',
    function($scope) {
      $scope.title = "Filter Based on Select Value";
      $scope.tags = [{
        id: 1,
        name: 'bla'
      }, {
        id: 2,
        name: 'bla1'
      }, {
        id: 4,
        name: 'bla2'
      }, {
        id: 3,
        name: 'bla2'
      }];
      $scope.selectTag = 1;
      $scope.ourTeamCategories = [{
        "id": 14,
        "title": 'Management',
        "tags": [1, 2, 3]
      }, {
        "id": 19,
        "title": 'Administration',
        "tags": [2, 3]
      }, {
        "id": 21,
        "title": 'Designers',
        "tags": [4]
      }, {
        "id": 22,
        "title": 'Accounts',
        "tags": [3]
      }, ]
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="app" ng-controller="Main">
  <select ng-model="selectTag" ng-options="tag.id as tag.name for tag in tags"></select>
  <div>
    selectTag: {{selectTag}}
  </div>

  <ul>
    <li ng-repeat="cat in ourTeamCategories | filter :{'tags':selectTag}">
      <h3>{{cat.title}}</h3>
      <!-- for testing -->
      <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}}
      <p>{{cat.tags}}</p>
    </li>
  </ul>
</div>

1
  • кстати пробовал так же только без кавычек не работало, хотя такой же фильтр рядом есть только с publish тот работает 18 янв 2016 в 7:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.