AngularJS ng-options 不呈现值答案

【问题标题】：AngularJS ng-options not rendering valuesAngularJS ng-options 不呈现值
【发布时间】：2013-01-03 17:50:06
【问题描述】：

如何呈现以下选项列表的值？

$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

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

结果：

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

【问题讨论】：

标签： javascript html json angularjs

【解决方案1】：

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/

【讨论】：

这种行为允许人们在选择选项中使用任何类型的对象，而不仅仅是字符串和数字。
@bmleite 这帮了大忙！但是如果我想通过提交表单将值存储在数据库中呢？

【解决方案2】：

要使其发挥作用，您（我们）必须更改我们向服务器提交数据的方式。

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

如果你想让它工作，你要么必须使用 ng-repeat 结合选项标签来呈现正确的值，要么通过从 AngularJS 控制器调用 .post 方法来提交数据。

这就是我喜欢和讨厌 AngularJS 的原因。

【讨论】：

我认为您在这里可能遇到的最大问题是尝试在您不接受作为 SPA 的应用程序中维护 javascript MVC。如果您将form 提交为带有$http.post 或$http.get 的角度模型，您就不会遇到问题

【解决方案3】：

我意识到这是一个老问题，但我也有这个问题。我对此的简单解决方案是创建一个隐藏输入并使用 ngModel 将其与 select 绑定。然后，当您进行普通表单提交时，提交隐藏的输入。希望这会有所帮助。

【讨论】：

【解决方案4】：

对于另一种方法，我们可以使用 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>

【讨论】：