Question

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

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

Answer 1

ng-options指令未在value元素上设置<options>属性。它总是使用一个序列。

使用limit.value as limit.text for limit in limits表示：

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

检查这个小提琴：http://jsfiddle.net/bmleite/k58Hw/

Answer 2

为了使其工作，您（我们）必须改变我们将数据提交到服务器的方式。

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

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

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

Answer 3

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

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

AngularJS ng-options不呈现值

4 个答案: