Angularjs 角度单选按钮组已检查

Angularjs 角度单选按钮组已检查,angularjs,angularjs-ng-repeat,Angularjs,Angularjs Ng Repeat,我有多个单选按钮组 我需要将每组中的一个(可能没有)设置为选中 数据源 html代码 <div class='row' ng-show="mk.selectedTypeAttributesID.length != 0"> <div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttrib

我有多个单选按钮组 我需要将每组中的一个(可能没有)设置为选中

数据源

html代码

<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
                                            <div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
                                                <div class="switch-field">
                                                    <div class="switch-title">{{att.name}}</div>
                                                    <div>
                                                        <input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}"  value="{{val.val}}" ng-click="mk.AttChange(att.id,val.val)"  />
                                                        <label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

{{att.name}
{{val.val}}
我需要使用数据源上的“Selected”值来设置复选框 源代码更新


您需要使用
ng model
来选择单选按钮

其中
ng model
保存所选值,如下所示

$scope.options = [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}];

$scope.selected = undefined;

var findResult = $scope.options.find(function(x){ return x.Selected == true });

if(findResult){
    $scope.selected = findResult.val;
}


编辑:由于复选框的来源是动态的,因此为要绑定的modal构建一个动态选择树

下面是一个例子:

$scope.options = [{ 0 : [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}]}, { 1 : [{ Selected: false, val: "2" }, { Selected: true, val: "1" }]}];

$scope.choices = [];

for(var i = 0; i < Object.keys($scope.options).length; i++){
    var keys = Object.keys($scope.options);
    $scope.choices.push({ Id: keys[i], Value: $scope.options[i][keys[i]].find(function(x){ return x.Selected == true }).val });
}
$scope.options=[{0:[{Selected:false,val:“red”},{Selected:true,val:“Black”},{Selected:false,val:“Pink”},{1:[{Selected:false,val:“2”},{Selected:true,val:“1”}];
$scope.choices=[];
对于(var i=0;i

您正在寻找这样的解决方案吗

var-app=angular.module('myApp',[]);
app.controller('MyController',函数MyController($scope){
$scope.selectedTypeAttributesID=[{
id:1,
价值观:[{
瓦尔:“红色”,
选定:“”
}, {
瓦尔:“绿色”,
选定:“”
}, {
瓦尔:“蓝色”,
选定:“”
}]
},
{
id:2,
价值观:[{
瓦尔:“1”,
选定:“”
}, {
瓦尔:“2”,
选定:“”
}, {
瓦尔:“3”,
选定:“”
}]
}
];
$scope.setVal=函数(附件、索引、val){
for(附件值的var k){
k、 选定=”;
}
att.Values[索引]。所选值=val;
}
});

{{att.name}
{{val.val}}
{{selectedTypeAttributesID | json}

使用记录在案的ng模型:ng model=“val.Selected”不工作是的。这不是它的工作原理。仔细阅读文档。ng模型必须包含所选收音机的值。哇,这是对filter()的严重滥用。过滤器应该是过滤的,而不是为每个元素做些什么。这就是forEach的作用。更好的选择是使用find():您是对的。。让我修改它,我在等待项目发布时快速完成:)很接近,但我有动态数据源我上传了新图像我有多个广播组和动态等一个是大小,一个是模型请注意html代码好吧,我向你展示了如何做,我不会为你写代码。您需要修改此项以适应您的问题。您不能只内联设置所选值,因为您需要使用ng模型以某种方式引用它,并且ng模型不能包含内联逻辑。我认为使用此方法并相应地更新内容没有问题,请尝试使用
$scope.$watch
如果您需要侦听更改事件或使用现有的单击事件,您必须更新行下(或行上)的进一步值…我的意思是我不能声明变量$scope.selected=undefined;因为我不知道有多少收音机