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; 

稍後處理存在於變量嚴重性中的嚴重性值。