Javascript AngularJS ng-options 不呈现值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14425686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-options not rendering values
提问by Habib MAALEM
How can I render the value of the following options list?
如何呈现以下选项列表的值？
$scope.limits = [ {value: '5', text: 'Afficher 5 par page'},
{value: '10', text: 'Afficher 10 par page'},
{value: '15', text: 'Afficher 15 par page'},
{value: '20', text: 'Afficher 20 par page'}
];
<select id="limitType" name="limit" ng-model="limit" ng-options="limit.value as limit.text for limit in limits"></select> enregistrement par page
Expected result (expecting in value="limit.value":
预期结果（期望在 value="limit.value" 中：
<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
<option value="5" selected="selected">Afficher 5 par page</option>
<option value="10">Afficher 10 par page</option>
<option value="15">Afficher 15 par page</option>
<option value="20">Afficher 20 par page</option>
</select>
Result:
结果：
<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
<option value="0" selected="selected">Afficher 5 par page</option>
<option value="1">Afficher 10 par page</option>
<option value="2">Afficher 15 par page</option>
<option value="3">Afficher 20 par page</option>
</select>
回答by bmleite
The ng-optionsdirective does not set the valueattribute on the <options>elements. It always uses a sequence.
该ng-options指令不会value在<options>元素上设置属性。它总是使用一个序列。
Using limit.value as limit.text for limit in limitsmeans:
使用limit.value as limit.text for limit in limits手段：
- Set the
<option>'s label aslimit.text - Save the
limit.valuevalue into the select'sng-model
- 将
<option>的标签设置为limit.text - 将
limit.value值保存到选择的ng-model
Check this fiddle: http://jsfiddle.net/bmleite/k58Hw/
检查这个小提琴：http: //jsfiddle.net/bmleite/k58Hw/
回答by user2560550
To make it work, you (we) have to change the way we submit the data to the server.
为了让它工作，你（我们）必须改变我们向服务器提交数据的方式。
The browser is "stupid", and it does not take care about AngularJS, jQuery or any other JavaScript framework doing magic in the code behind. If the option contains index value instead of real value, the browser will send the index value to the server.
浏览器是“愚蠢的”，它不关心 AngularJS、jQuery 或任何其他 JavaScript 框架在背后的代码中发挥作用。如果选项包含索引值而不是实际值，浏览器会将索引值发送到服务器。
If you want to make it work, you either have to use ng-repeat in conjunction with option tag to render correct values, or to submit data by calling the .postmethod from the AngularJS controller.
如果你想让它工作，你要么必须将 ng-repeat 与选项标签结合使用来呈现正确的值，或者通过.post从 AngularJS 控制器调用该方法来提交数据。
This is why I love & hate AngularJS.
这就是我喜欢和讨厌 AngularJS 的原因。
回答by wlingke
I realize this is an old question but I had an issue with this too. My simple solution to this was to create a hidden input and bind it using ngModel with the select. Then when you do normal form submit, submit the hidden input. Hope this helps.
我意识到这是一个老问题，但我也有这个问题。我对此的简单解决方案是创建一个隐藏的输入并使用 ngModel 和 select 绑定它。然后当你做普通表单提交时，提交隐藏的输入。希望这可以帮助。
回答by Ejo V Joy
for an alternate approach, we can use ng-repeat
对于另一种方法，我们可以使用 ng-repeat
<select ng-model="limit" id="limitType" class="ng-pristine ng-valid" >
<option ng-repeat="option in limits " value="{{option.value}}" >
{{option.text}}
</option>
</select>
