javascript - 为什么我的 ng-materials "select"元素的功能与 HTML5 元素不同？

Question

我正在尝试使用 ng-materials ui-components 中的 md-input 和 md-option 元素。

作为 ng-materials 对象，它不起作用:

<md-input-container>
    <md-select ng-model="forcast.selectedCompound">
       <md-option ng-value="compound._id" ng-repeat="compound in forcast.compounds" >
              {{compound.compound_number}}
        </md-option>
    </md-select>
</md-input-container>

使用常规 html 5 组件确实可以工作:

<md-input-container>
    <select ng-model="forcast.selectedCompound">
       <option value="{{compound._id}}" ng-repeat="compound in forcast.compounds" >
              {{compound.compound_number}}
        </option>
    </select>
</md-input-container>

因为 html5 元素有效，我确信我的 ng-materials 标记有问题？

Answer 1

您应该在 md-option 中使用 value 属性，而不是使用 {{ }} 中的 ng-value 。查看select的官方文档.

<md-input-container>
<md-select ng-model="forcast.selectedCompound">
   <md-option value="{{compound._id}}" ng-repeat="compound in forcast.compounds" >
          {{compound.compound_number}}
    </md-option>
</md-select>

工作示例。 http://codepen.io/next1/pen/yOgYVP