0

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

应用程序的网页是用户编辑其个人资料的输入表单。输入表单在角度材料显示控件中显示用户的现有详细信息。我正在使用“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

问题：可以解决这个问题吗？

4

1 回答 1

2

您应该将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>
于 2020-01-15T13:15:00.897 回答