Angularjs ng-repeat 不适用于 md-select 和 md-option答案

【问题标题】：Angularjs ng-repeat not working with md-select and md-optionAngularjs ng-repeat 不适用于 md-select 和 md-option
【发布时间】：2017-02-06 13:04:17
【问题描述】：

我有以下代码，我将 ng-repeat 与 md-select 一起使用。但它不起作用，下拉菜单显示为空白。如果我将 ng-repeat 与 div 或 html 一起使用，则选择它可以工作。请看下文，

角形：-

<div class="col-xs-12 formClass" ng-controller="dropDownController">
  <md-input-container class="formClass">
    <label>Impacts</label>
      <md-select name="impact" id="impact" ng-model="impact">
        <md-option  ng-repeat="impact in impacts.availableImpacts" value="{{impact.id}}">{{ impact.name }}
        </md-option>
      </md-select>
  </md-input-container>
</div>

js:-

app.controller('dropDownController', function ($scope) {          
  $scope.impacts = {
    availableImpacts: [
                        {id: '1', name: 'name1' },
                        { id: '2', name: 'name2' },
                        { id: '3', name: 'name3' }
                      ],
 };
});

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

我的 Angular 版本对我来说是旧版本的 md-input-container 没有这个标签工作

<!--<md-input-container>-->
     <label>impact</label>
       <md-select ng-model="selectedImpact">
          <md-option  ng-repeat="impact in impacts.availableImpacts" value="{{impact.name}}">
        {{impact.name}}
      </md-option>
    </md-select>
<!--  </md-input-container>-->

【讨论】：

【解决方案2】：

将您的 md-option 标记更改为如下所示：

<md-option  ng-repeat="impact in impacts.availableImpacts" ng-value="impact.id">{{ impact.name }}</md-option>

使用 ng-value 而不是 value 并删除 {{}}。

查看documentation 了解更多示例。

您的项目中是否包含正确的角度材质脚本？

【讨论】：

是的，我的其他角度控制器和指令以相同的形式运行良好。只有上面给出的问题。我已经尝试过上述解决方案，但没有奏效:(
试试这个而不是在视图中循环 $scope.availableimpacts=$scope.impacts.availableImpacts[0]; ng-repeat="impact in availableimpacts" 看看是否有什么不同
你有没有让棱角材料在其他地方工作？
还没有运气:(。只有 md-select 到处都是我面临的问题。但是当我将它与普通的“Select”或“div”一起使用时，ng-repeat 工作正常。
其他角材料指令是否像复选框指令一样工作？我猜你没有正确添加角材料。如果其他材料指令正常工作，您会收到任何控制台错误吗？

【解决方案3】：

您绑定数据的方式似乎有问题，

这对我有用，

<md-input-container>
     <label>impact</label>
    <md-select ng-model="selectedImpact">
      <md-option  ng-repeat="impact in impacts.availableImpacts" value="{{impact.name}}">
        {{impact.name}}
      </md-option>
    </md-select>
  </md-input-container>

见plunker

【讨论】：

【解决方案4】：

这可能与这张票有关：Angularjs md-options are showing in Inspect but not on screen

即使存在“option”DOM 元素，我也遇到 md-select 不显示下拉菜单的问题。

我就我的特定问题发布了这张票：md-select doesnt display options and causes freezing

【讨论】：