mdChips с фильтром

Question

Я новичок в AngularJS, пробовал что-то с угловым материалом и нуждался в некоторых идеях/помощи.

Я иконка Font Потрясающие которые отображаются с нг-повтором:

<ul ng-repeat="item in items"> 
    <i ng-class="{'test': item.active}" class="fa fa-{{item.name}}">{{item.name}}</i> 
</ul> 

Ниже у меня есть список иконок с флажками:

<span ng-repeat="item in items | filter: item.active = false"> 
    <input type="checkbox" ng-model="item.active"> {{item.name}}<br> 
</span> 

Если флажок установлен, запись списка должна исчезнуть из списка. Это работает с фильтром по объекту item.active

Теперь я хочу отображать активированные элементы над списком с помощью md-chips (Angular Material Chips).

Итак, если элемент списка активирован, элемент должен быть md-чипом выше списка (больше не отображается в списке).

Если я нажимаю на «X» в md-чипе, только состояние свойства item.active должно снова измениться на false.

У меня есть свои рабочие файлы на Plunker, поэтому мое текущее рабочее состояние можно прочитать: https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview

Кто-нибудь есть идея, как я могу это реализовать?

Answer 1

Самый простой способ сделать это применить ng-click к вашему md-chip пункта и этим нажмите будет установлен active = false:

... 
<md-chips class="custom-chips" ng-model="items | filter: {active:true}" readonly="true"> 
    <md-chip-template> 
     <span ng-click="$chip.active=false"> 
      <strong>{{$chip.name}}</strong> 
     </span> 
    </md-chip-template> 
</md-chips> 
... 

Вот plnkr пример.

EDIT:

Модифицированный plunker показать только active MD-чипы.

Надеюсь, это поможет.

Answer 2

Возможно, вы захотите отфильтровать массив микросхем, используя встроенную функцию filterFilter. Наблюдатель, который содержит последний, будет вызывать слушателя всякий раз, когда изменяется filterText.

... 
$scope.array = [ 
    "active directory", 
    "outlook", 
    "edrm", 
    "gcdocs", 
    "novell", 
    "iPrint", 
    "iManager", 
    "sigma", 
    "bitlocker", 
]; 

$scope.filterText = ""; 

$scope.$watch('filterText', function(newValue, oldValue) { 
    $scope.filteredArray = filterFilter($scope.array, $scope.filterText); 
}, false); 
... 

Следующая надпись будет отображать и фильтровать чипсет.

<md-content flex class="md-padding"> 
    <label>Filter: <input ng-model="searchText"></label> 
    <md-chips ng-model="filteredArray" readonly="ctrl.readonly" 
    md-removable="removable" placeholder="Enter an issue..."> 
    <md-chip-template> 
     <strong>{{$chip}}</strong> 
    </md-chip-template> 
    </md-chips> 
</md-content> 

Для получения дополнительной информации о фильтрах см https://docs.angularjs.org/guide/filter

Для получения дополнительной информации на $ часы смотрите https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope