如何将选项的选定状态绑定到AngularJS中的布尔值答案

【问题标题】：How to bind selected state of an option to a boolean in AngularJS如何将选项的选定状态绑定到AngularJS中的布尔值
【发布时间】：2013-11-27 22:34:19
【问题描述】：

我有一个选择元素列表，其中选项在 JSON 对象中定义。我希望每个选项都将选定状态保留为布尔值，这意味着当用户选择一个选项时，该选项的“选定”值变为“真”，如果用户选择另一个选项，该值变为“假”。

<div ng-repeat="choice in choices">
            {{choice.name}}:
            <select>
                <option value="" ></option>
                <option ng-repeat="option in choice.options" ng-selected="option.selected">{{option.name}}</option>
            </select>
        </div>

选项示例：

{id=1, name='option1', selected=false}

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

为了简单起见，重新构建模型。像这样的：

HTML

<select ng-model="selectedChoice" 
ng-options="opt as opt for (opt, obj) in options">
    <option value=""></option>
</select>

控制器

$scope.options = {
    "option1":{
        id:1, 
        name:'option1', 
        selected:false
    },
    "option2":{
        id:2, 
        name:'option2', 
        selected:false
    },
    "option3":{
        id:3, 
        name:'option3', 
        selected:false
    }
}

$scope.$watch("selectedChoice",function(newVal, oldVal){
    if(!newVal) return;
    $scope.options[newVal].selected = true;
    $scope.options[oldVal].selected = false;
});

Fiddle

【讨论】：