指定select选项的不同方法

时间:2014-03-19 06:52:54

标签: javascript html angularjs

我很难理解ng-model在angular.js中的select指令中是如何工作的。这是标记:

<h1>using ngOptions</h1>
<select ng-model="selected" ng-options="value for value in [1, 2, 3, 4, 5, 6]"></select>

<h1>using ngRepeat</h1>
<select ng-model="selected">
    <option ng-repeat="value in [1, 2, 3, 4, 5, 6]" value={{value}}>{{value}}</option>
</select>

<h1>using copy paste</h1>
<select ng-model="selected">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<h1>Direct value</h1>
<input type="number" ng-model="selected"/>
使用ngOptions和复制粘贴的

Select按预期工作。但是{ng}重复的select非常不同。您可以在此处测试它们:jsfiddle

PS。我知道使用select的推荐方法是使用ngOptions。但为什么它行为不端?

谢谢!

1 个答案:

答案 0 :(得分:1)

你应该使用ng-options而不是<option>ng-repeat的原因是Angular需要在<select><option> s之间创建绑定。当您使用ng-repeat自己创建选项时,Angular不会知道它应该为选择列表设置所需的绑定。