Блог

Главная - Вопросы по программированию - как фильтровать повторяющиеся данные в ng-repeat?

как фильтровать повторяющиеся данные в ng-repeat?

#angularjs #typescript

#angularjs #typescript

Вопрос:

У меня есть повторяющиеся элементы в списке категорий, но я должен отображать только неповторяющиеся элементы с помощью ng-repeat. Как отфильтровать этот список, чтобы отображать только неповторяющиеся элементы, у меня есть пример кода.

Смотрите мое мнение ниже

 <tr ng-repeat="category in cc.categoriesList " 
    ng-click="cc.selectCatForNewTask(category.cid)" 
    ng-class="{selected: cc.getCtgRowClass(category.cid)}"> 
  <td> 
     {{category.categoryName}} 
  </td> 
</tr>

Комментарии:

1. <tr ng-repeat=»категория в cc.categoriesList » ng-click=»cc.selectCatForNewTask(category.cid)» ng-class=»{выбранный: cc.getCtgRowClass(category.cid)}»> <td> {{category.CategoryName}} </td> </tr>

2. Концептуально, я чувствовал бы себя комфортно, просто используя набор для фильтрации дубликатов, а затем просто используя ng-repeat этот набор.

Ответ №1:

Попробуйте это:

  <tr ng-repeat="category in cc.categoriesList | unique:category.somefield " ng-click="cc.selectCatForNewTask(category.cid)" ng-class="{selected: cc.getCtgRowClass(category.cid)}">
    <td> {{category.categoryName}} </td> 
</tr>

Вам нужно будет установить некоторые зависимости:

1. В вашем терминале перейдите в свой проект и запустите для установки angular-ui-utils unique:

 bower install angular-ui-utils#bower-unique

2. Требуется unique.js файл, добавив это в свой проект под вашим скриптом angular:

 <!-- angular script -->
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<!-- unique script -->
<script type="text/javascript" src="bower_components/angular-ui-utils/unique.js"></script>

3. Добавьте unique в качестве модуля в ваше приложение:

 angular.module('myApp', ['ui.unique'])

исходный код доступен здесь: уникальный фильтр AngularUI