角材料md-select显示选择的数量 [英] Angular Material md-select Displaying quantity selected

问题描述

有没有一种方法可以使用Md-select对角材料进行显示以显示选中了多少个复选框，而不是显示所有选定值.例如，如果我有4个选项，意式香肠，奶酪，香肠和蔬菜，则选择其中三个.我将如何显示"3 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.

推荐答案

您的意思是这样的吗? - CodePen

Do you mean something like this? - 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";
    })
});

这篇关于角材料md-select显示选择的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！