將角材料中的多個選定項彼此堆疊？

Question

這是我的行為的Codepen 。

多個選擇的選項一個接一個地堆疊，但是問題是，一旦用戶選擇了越來越多的選項，選項文本就會溢出具有設定寬度的表單文本框。

我需要找到一種方法，一旦到達文本框的末端，就可以將所選選項彼此堆疊在一起，從而將所有選項堆疊在一起。

 (function () { 'use strict'; angular .module('MyApp') .controller('AppCtrl', function($scope) { this.likedAnimals = ["mouse", "dog"]; this.animals = ["mouse", "dog", "cat", "bird", "LongAnnnnnnimal","LongerrrrrrrrrrrrText"]; }); })(); 

 <div> <md-input-container> <md-select multiple ng-model="ctrl.likedAnimals" placeholder="please select"> <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option> </md-select> </md-input-container> </div> 

Answer 1

我認為您應該以px為單位指定width ，以設置md-select的確切寬度，而不是將width指定為md-option 。 請參閱下面的鏈接。

http://codepen.io/next1/pen/xVLEpy

<md-input-container style="background-color:cyan">
<md-select flex style="background-color:yellow;width:200px" multiple ng-model="ctrl.likedAnimals" placeholder="please select"  >
  <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option>
</md-select>