根据在angularjs中检查的一个无线电更改多个单选按钮选择

时间:2017-05-18 23:24:29

标签: javascript angularjs

我是angularjs的新手并且遇到了我想将选定的无线电选项绑定到模型/控制器对象的情况。我想要做的是,所有三个单选按钮(A,B和C)应该显示相同的选项,在App1无线电选项中选择,以后每个(A,B和C单选按钮选项)可以根据用例更改,我想保存用户的点击次数。

例如:如果用户在App1的单选按钮组中选择Y选项,则应选中带有Y选项的所有三个A B和C单选按钮选项。

非常感谢任何帮助。Plunk here https://plnkr.co/edit/vuLJdUFSTsUp5hfoazBp?p=preview

1 个答案:

答案 0 :(得分:0)

您可以使用angular提供的索引。这是我怎么做的代码

html代码:

<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="app in apps" ng-init="index1 = $index">
    {{app.proj}}
    <span ng-repeat="tc in typeCodes" ng-init="index2 = $index">
        <input type="radio" name="app_{{index1}}" ng-model="app.selectedCode" value={{tc.key}} 
               ng-change="selectionChanged(index1, app.selectedCode)">{{tc.key}}
    </span>
    <div>
        <span ng-repeat="subApp in app.subApps" ng-init="index3 = $index">
            {{subApp.appName}}-
            <span ng-repeat="tc in typeCodes" ng-init="index4 = $index">
                <input type="radio" name="tc_{{index1}}_{{index3}}" ng-model="subApp.type" ng-value="{{tc.key}}" 
                       ng-checked="subApp.type === tc.key"
                       ng-change="subAppSelection(index1, index3, tc.key)">{{tc.key}}
            </span><br>
        </span>
    </div><br><br>
</div>

控制器代码:

$scope.selectionChanged = function (ind, type) {
    for (var j = 0; j < $scope.apps[ind].subApps.length; j++) {
        $scope.apps[ind].subApps[j].type = type;
    }
}

$scope.subAppSelection = function (ind1, ind2, type) {
    $scope.apps[ind1].subApps[ind2].type = type;
}