Angular Material md-select 显示选择的数量

Question

有没有一种方法可以将 Md-select 用于角度材料来显示选中了多少个复选框，而不是显示所有选定的值。例如，如果我有 4 个选项意大利辣香肠、奶酪、香肠和蔬菜，我选择其中的三个。我将如何显示“3 Selected”，而不是写出整个选择。

Answer 1

你的意思是这样的吗？ - CodePen

标记

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