验证动态创建的复选框和单选按钮

时间:2016-08-05 09:48:43

标签: angularjs cordova ionic-framework angularjs-validation

我有一个应用程序,根据从服务器发送的数据生成动态复选框和单选按钮。显示的复选框/单选按钮的数量最多可增加到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>

0 个答案:

没有答案