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

时间:2013-11-27 14:14:02

标签: javascript angularjs angularjs-directive

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

<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}

1 个答案:

答案 0 :(得分: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