angularjs：加载时无法在 md-select 中显示多个 selected 项目

Question

我正在学习使用 "Angularjs" 开发 Web 应用程序。

应用程序的网页是用户编辑其配置文件的输入表单。输入表单在 angular material 显示控件中显示用户的现有详细信息。我正在使用 "md-select" 下拉菜单来显示用户的爱好。但是我无法在 "md-select" 下拉列表中显示现有的爱好。

以下是无效代码：

HTML:

<md-select ng-model="ctrl.exthobbies" ng-model-options="{trackBy: '$value.id'}">
    <md-option ng-repeat="n in ctrl.hobbies" ng-value="n">
      {{ n.value }}
    </md-option>
</md-select>
<p>number: {{ ctrl.exthobbies}}</p>

JS:

   _this.exthobbies= [{id: 1, value: "Reading"},{id: 6, value: "Paragliding"}];
    _this.hobbies= [
      {id: 0, value: "None"},
      {id: 1, value: "Reading"},
      {id: 2, value: "Writing"},
      {id: 3, value: "Driving"},
      {id: 4, value: "Swimming"},
      {id: 5, value: "Skating"},
      {id: 6, value: "Paragliding"},
      {id: 7, value: "Hiking"}
    ];

请在 "Codepen" 中找到完整代码： https://codepen.io/oiproj/pen/KKwBxoM

问题：能否解决？

Answer 1

您应该将 multiple="true" 添加到 md-select 以支持多个项目：

<md-select multiple="true" ng-model="ctrl.exthobbies" ng-model-options="{trackBy: '$value.value'}">
    <md-option ng-repeat="n in ctrl.hobbies track by n.value" ng-value="n">
      {{ n.value }}
    </md-option>
  </md-select>

angularjs：加载时无法在 md-select 中显示多个 selected 项目

angularjs: Cannot show multiple selected items in md-select on load

angularjs

angular-material

md-select