Angular Material md-select Displaying quantity selected

问题

Is there a way using Md-select for angular material to display how many checkboxes were checked instead of displaying all of the selected values. For example If I have 4 options pepperoni, cheese, sausage and veggies and I select three of them . How would I display "3 Selected", Instead of writing out the entire selections.

回答1:

Do you mean something like this? - CodePen

Markup

<div ng-controller="SelectOptGroupController as vm" class="md-padding" ng-cloak="" ng-app="MyApp">
  <div>
    <h1 class="md-title">Pick your pizza toppings</h1>
    <md-input-container md-no-float>
      <label>Toppings</label>
      <md-select ng-model="vm.selectedToppings" multiple="" md-selected-text="vm.text" md-offset="0 30">
        <md-option ng-value="topping.name" ng-repeat="topping in vm.toppings">{{topping.name}}</md-option>
      </md-select>
    </md-input-container>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial'])
  .controller('SelectOptGroupController', function($scope) {
    var vm = this;
    vm.toppings = [
      { name: 'Pepperoni' },
      { name: 'Cheese' },
      { name: 'Sausage' },
      { name: 'Veggies' }
    ];
    vm.selectedToppings = [];
    $scope.$watch("vm.selectedToppings", function () {
      vm.text = vm.selectedToppings.length + " Toppings selected";
    })
});

来源：https://stackoverflow.com/questions/40614619/angular-material-md-select-displaying-quantity-selected