13

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

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

4 回答 4

20

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

于 2013-01-20T16:44:19.420 回答
3

为了让它发挥作用，您（我们）必须改变我们向服务器提交数据的方式。

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

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

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

于 2013-07-08T11:35:22.117 回答
2

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

于 2013-11-05T20:22:05.380 回答
0

对于另一种方法，我们可以使用 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>
于 2017-05-23T07:42:08.990 回答