同步AngularJS中动态选择列表的参数

时间:2014-10-26 20:21:46

标签: angularjs angularjs-scope

我有一个包含动态生成的选择列表的表单。从范围中检索此列表的值。还从范围中检索当前选定的值。

不幸的是,存在同步问题。

下面说明了这一点。动态选择列表显示1为已选中,但参数为2.静态选择列表显示正确的值。



angular.module('fiddle', [])
.controller('Ctrl', function($scope) {
    $scope.xs = [1,2,3];
    $scope.param = 2;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="fiddle" ng-controller="Ctrl">
     Correct representation:
     <select ng-model="param">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select><br>
    Incorrect representation:
    <select ng-model="param">
        <option ng-repeat="x in xs" value="{{x}}">{{x}}</option>
    </select><br>
    param: {{param}}
</body>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

由于我正在适当地制定我的问题,我经常找到解决方案。

我应该在选项标签上使用ng-options而不是ng-repeat。

<select ng-model="param" ng-options="x for x in xs">
</select>

https://docs.angularjs.org/api/ng/directive/select