我有一个应用程序,根据从服务器发送的数据生成动态复选框和单选按钮。显示的复选框/单选按钮的数量最多可增加到20个(在一个组中)。
我的问题是,验证一组动态生成的复选框,单选按钮的最佳方法是什么,它们也是同一表单元素的一部分。
以下是我正在使用的代码 数据类似于以下格式
$scope.values = [
{ Type: 'CheckBox',
IsRequired: true,
Id:1,
Options: [
{
Id: 11,
Text: 'Test 1',
},
{
Id: 12,
Text: 'Test 2',
},
{
Id: 13,
Text: 'Test 3',
},
{
Id: 14,
Text: 'Test 4',
}
]
},
{ Type: 'Radio',
IsRequired: 'true',
Id: 2,
Options: [
{
Id: 21,
Text: 'Radio 1',
},
{
Id: 22,
Text: 'Radio 2',
},
{
Id: 23,
Text: 'Radio 3',
},
{
Id: 24,
Text: 'Radio 4',
},
]
},
];
为了构建视图,我使用以下代码生成复选框
<div ng-class="{ 'has-errors' : testForm.cb_{{q.Id}}.$invalid && {{q.IsRequired}} == true, 'no-errors' :
testForm.cb_{{q.Id}}.$valid && {{q.IsRequired}} == true}">
<ion-checkbox class="item" ng-repeat="opt in q.Options"
name="cb_{{q.Id}}"
ng-required="q.IsRequired"
ng-model="options">
{{opt.Text}}
</ion-checkbox>
</div>
单选按钮
的代码<div ng-class="{ 'has-errors' : testForm.rb_{{q.Id}}.$invalid
&& {{q.IsRequired}} == true, 'no-errors' : testForm.rb_{{q.Id}}.$valid
&& {{q.IsRequired}} == true}">
<ion-radio ng-repeat="opt in q.Options"
ng-model="choice"
name="rb_{{q.Id}}"
ng-value="opt.Id"
ng-required="true">{{opt.Text}}
</ion-radio>
</div>