2

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

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

如果我单击 md-chip 中的“X”，则只有属性 item.active 的状态应再次更改为 false。

我在 Plunker 上有我的工作文件，因此可以读取我当前的工作状态： https ://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview

有人知道我该如何实现吗？

4

2 回答 2

2

最简单的方法是应用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 以仅显示activemd 芯片。

希望它会有所帮助。

于 2016-05-26T13:21:12.983 回答
0

您可能希望使用内置的 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

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

于 2017-02-09T02:51:08.833 回答