Angularjs md选项显示在Inspect中，但不显示在屏幕上

Question

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

<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

试试这个我更喜欢使用NG-选项，而不是NG重复

<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 2

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

在模型中$ scope.severities.name什么和MD-选择 - 标签你正在使用这是错误的。

试试这个 -

<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 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; 

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