AngularJS ng-options not rendering values

如何呈现以下选项列表的值？AngularJS ng-options not rendering values

$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

预期结果（在值= “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>

结果：

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

来源

2013-01-20 Habib MAALEM

的ng-options指令不设定于<options>元件value属性。它总是使用一个序列。

使用limit.value as limit.text for limit in limits种手段：

设置<option>的标签为limit.text
保存limit.value值到选择的ng-model

检查此琴：http://jsfiddle.net/bmleite/k58Hw/

来源

2013-01-20 16:44:19 bmleite

此行为允许使用任何类型的对象中选择选项，不仅是字符串和数字。 –

@bmleite帮助了很多！但是如果我想通过提交表单将值存储在数据库中呢？ –

要使其工作，你（我们）必须改变我们向服务器提交数据的方式。

浏览器是“愚蠢的”，它不关心AngularJS，jQuery或任何其他JavaScript框架在背后的代码中做魔术。如果该选项包含索引值而非实际值，则浏览器会将索引值发送到服务器。

如果要使其工作，您必须使用ng-repeat与选项标记一起呈现正确的值，或者通过从AngularJS控制器调用.post方法来提交数据。

这就是为什么我爱&讨厌AngularJS。

来源

2013-07-08 11:35:22 user2560550

我认为你可能在这里挣扎的大问题是试图在你不接受作为SPA的应用程序中维护一个JavaScript MVC。如果你使用'$ http.post'或'$ http.get'作为角度模型来提交'form'，你就不会有问题了 – Mutmatt

我意识到这是一个老问题，但我也有这个问题。我的简单解决方案是创建一个隐藏的输入，并使用ngModel与select进行绑定。然后当你进行正常的表单提交时，提交隐藏的输入。希望这可以帮助。

来源

2013-11-05 20:22:05 wlingke

的另一种方法，我们可以用NG-重复

<select ng-model="limit" id="limitType" class="ng-pristine ng-valid" > 
<option ng-repeat="option in limits " value="{{option.value}}" > 
    {{option.text}} 
</option> 
</select>

来源

2017-05-23 07:42:08

AngularJS ng-options not rendering values

回答

相关问题