javascript - 将 Angular-Material 中的多个选定元素堆叠在一起？

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 的确切宽度，而不是指定 的宽度md-选项。请参阅下面的链接。

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>