带过滤器的 mdChips

Question

我是 AngularJS 的新手，正在尝试 Angular Material 并需要一些想法/帮助。

我有使用 ng-repeat 显示的 Font Awesome 图标：

<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 筹码）在列表上方显示激活的项目。

所以如果一个列表项被激活，元素应该是列表上方的一个md芯片（不再显示在列表中）。

如果我点击 md-chip 中的 'X'，只有属性 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 示例。

编辑：

修改 plunker 以仅显示 active md-chips。

希望对您有所帮助。

Answer 2

您可能想使用内置的 filterFilter 函数过滤 chips 数组。包含后者的观察器将在 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

有关 $watch 的更多信息，请参阅 https://docs.angularjs.org/api/ng/type/$rootScope.Scope

带过滤器的 mdChips

mdChips with filter

angularjs

angular-material

md-chip