使用ng-options和ng-selected更新模型

Question

使用ng-options和ng-selected更新模型

4

我将尝试使用ng-options从下拉菜单中更新一个模型，并使用ng-selected选择已选值。这里是一个简化的示例（和fiddle）。

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="QuarterController">
    <select name="quarter" ng-model="Quarter.id" ng-options="q.id as q.val for q in Quarters">
      <option ng-selected="Quarter.val===q.val"></option>
    </select>
    <input type="button" name="Submit" value="Submit" ng-click="submit()"/>
    <br/>
    <p>{{answer}}</p>
  </div>
</div>

Angular

function QuarterController($scope) {
    $scope.Quarters = [{val: 'Q1', id: 1}, {val: 'Q2', id:2}, {val:'Q3', id:3}, {val:'Q4', id:4}];
    $scope.Quarter = {val: 'Q2', id: 2, extraField: 'Hello'};

    $scope.submit = function() {
        $scope.answer = "Val: " + $scope.Quarter.val + ", Id: " + $scope.Quarter.id + $scope.Quarter.extraField;
    };
}

这里发生的情况是下拉选项是来自于$scope.Quarters中的“val”，所选选项的id保存在$scope.Quarter.id中。“submit”显示来自$scope.Quarter的id和val。$scope.Quarter.id在提交时会更新，但$scope.Quarter.val不会更新。有人知道如何解决这个问题吗？

编辑

添加了$scope.Quarter.extraField以更好地说明我要解决的问题。我需要更新id和val，但我希望extraField保持不变。

- tarrball

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sylwester · Accepted Answer

您的选择指令中有小错误，请参见此处

视图：

待办事项

  <div ng-controller="QuarterController">
    <select name="quarter" ng-model="Quarter" ng-options="q.val for q in Quarters">
        <option value="">{{Quarter.val}}</option>
    </select>
      <input type="button" name="Submit" value="Submit" ng-click="submit()"/>
      <br/>
      <p>{{answer}}</p>

  </div>
</div>

JS:

function QuarterController($scope) {
    $scope.Quarters = [{
        val: 'Q1',
        id: 1
    }, {
        val: 'Q2',
        id: 2
    }, {
        val: 'Q3',
        id: 3
    }, {
        val: 'Q4',
        id: 4
    }];
    $scope.Quarter = {
        val: 'Q2',
        id: 2
    };

    $scope.submit = function () {
        $scope.answer = "Val: " + $scope.Quarter.val + ", Id: " + $scope.Quarter.id;
    };
}