Angularjs md-选项显示在“检查”中，但不显示在屏幕上

Question

我有棱角的形式，我正在使用md-select和md-option。但是当我单击下拉菜单时，冻结屏幕，如果我通过检查元素看到 md-选项将显示。

<md-select ng-model="Severities" placeholder="Select a Severity">
    <md-select-label>{{ Severities.name }}</md-select-label> 
    <md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
       {{ opt.name }}
    </md-option>
</md-select>

$scope.severities= { 
    availableOptions: [ 
    {
        id: '1', 
        name: 'name1' 
    }, 
    { 
        id: '2', 
        name: 'name2' 
    }, 
    { 
        id: '3', 
        name: 'name3' 
     } 
     ], };

Answer 1

$scope.severities= { 
     availableOptions: [ 
           {id: '1', name: 'name1' },
           { id: '2', name: 'name2' },
           { id: '3', name: 'name3' }
]};

在你的模型中，$scope.severities.name 什么都不是，而在 md-select-label 中，你正在使用这个是错误的。

试试这个——

<md-select ng-model="Severities" placeholder="Select a Severity">
     <md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
           {{ opt.name }}
      </md-option>
</md-select>

Answer 2

试试这个，我更喜欢使用 ng-option 而不是 ng-repeat

 <md-select ng-model="Severities" placeholder="Select a Severity" ng-option="opt as opt for opt in severities.availableOptions">
<ng-option ng-selected="true">Select Option</ng-option>
</md-select>

Answer 3

我在从数组生成值并在 ng 选项中使用它时遇到了同样的问题。根据我所读到的内容，ng-options有时可以通过ng-repeat使用。您可以使用的替代方法如下：

<md-select ng-model="Severities" id="Severities"><ng-options ng-repeat="opt in severities.availableOptions" ng-value="{{opt.name}}">{{opt.name}}></ng-options></md-select>

控制器代码将如下所示

$scope.severities= { 
 availableOptions: [ 
       {id: '1', name: 'name1' },
       { id: '2', name: 'name2' },
       { id: '3', name: 'name3' }

]};

但我使用 JavaScript 来获取在 ng-options 中选择的值。

var severity = document.getElementById("Severities").value;

稍后处理变量严重性中存在的严重性值。