我将尝试使用ng-options从下拉菜单中更新一个模型,并使用ng-selected选择已选值。这里是一个简化的示例(和fiddle)。
HTML
这里发生的情况是下拉选项是来自于$scope.Quarters中的“val”,所选选项的id保存在$scope.Quarter.id中。“submit”显示来自$scope.Quarter的id和val。$scope.Quarter.id在提交时会更新,但$scope.Quarter.val不会更新。有人知道如何解决这个问题吗?
编辑
添加了$scope.Quarter.extraField以更好地说明我要解决的问题。我需要更新id和val,但我希望extraField保持不变。
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保持不变。