過濾器中選擇複選框項展角材料芯片

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]); 
    } 
    } 
});