angularjs - 过滤选中的复选框项目显示在角材料芯片中

Question

我想在角材料芯片中显示过滤器选中的复选框项目

<h2 class="md-title">Use the default chip template.</h2>

<md-chips ng-model="items" readonly="readonly"></md-chips>


<div layout="column">
    <div flex><h2>Filter</h2></div>

    <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
        <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
            {{ item }}
        </md-checkbox>
    </div>
</div>

Answer 1

你可以这样做 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <h2 class="md-title">Use the default chip template.</h2>

  <md-chips ng-model="selectedItems" readonly="readonly">
     <md-chip-template>
       {{$chip.name}}
    </md-chip-template>
  </md-chips>


  <div layout="column">
      <div flex><h2>Filter</h2></div>

      <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
          <md-checkbox ng-model="item.selected" ng-click="toggle($index)">
              {{ item.name }}
          </md-checkbox>
      </div>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.items = [
    {name:"John", selected: true},
    {name:"Paul", selected: true},
    {name:"George", selected: true},
    {name:"Ringo", selected: true}
  ];
  $scope.selectedItems = angular.copy($scope.items);

  $scope.toggle = function (index) {
    if ($scope.items[index].selected) {
      $scope.selectedItems.splice(index, 1);
    }
    else {
      $scope.selectedItems.splice(index, 0, $scope.items[index]);
    }
  }
});