2016-11-15 7 views
1

選択したすべての値を表示する代わりに、チェックマークが表示された角度のマテリアルをMd-selectで表示する方法はありますか?例えば、ペパロニ、チーズ、ソーセージ、野菜の4つのオプションがあり、そのうち3つを選択します。選択肢全体を書き出す代わりに、どのようにして "3 Selected"を表示しますか?角度材質md-select数量を選択して表示

答えて

3

このような意味ですか? - CodePen

enter image description here

マークアップ

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

はい!一度あなたの完了したディスプレイのように、あなたはプレースホルダセクションで3つのトッピングを選択しました。あなたの例では、入力で選択されたすべての注文がまだ列挙されています。ありがとう、私はそれを試してみます – Flash

+0

@Flash更新されたCodePenを見て、入力中の選択を隠す答え。 –

+0

Thannks、トッピングが表示される場所はありませんか? – Flash

関連する問題