Angular 带有 ng-repeat 的单选按钮验证

Question

我运行遇到了一个有趣的 Angular 验证问题。我需要确保选择了单选按钮（它们在加载时可能没有默认值）。单选按钮的值是使用 ng-repeat 从数组中迭代得到的。这整个事情也发生在另一个 ng-repeat 用户列表中。

问题是我必须在每组相关单选按钮上设置 unique/dynamic name 属性，否则选择其中一个将取消选择其他不同的行。验证基于 name 属性，我似乎找不到在所需的 ng-class 和 ng-show 表达式中使用此 unique/dynamic 名称的方法。

这是行不通的： ng-show="userFormRow.service-{{$index}}.$invalid"

这是上下文中的代码示例：

<table class='table table-striped table-bordered'>
    <tbody>
      <tr ng-repeat="u in users"
          ng-form="userFormRow">
        <td>
          <!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
          <div class="form-group"
               ng-class="{'has-error': userFormRow.service-{{$index}}.$invalid }">
            <label class="control-label center-block">Service</label>
            <div class="radio-inline" ng-repeat="o in serviceOptions">
              <label>
                <!-- HERE is where I define the unique name attribute based on the index of the table repeater -->
                <input type="radio"
                       name="service-{{$parent.$index}}"
                       value="{{::o}}"
                       ng-model="u.Service"
                       ng-required="!u.Service"> {{::o}}
              </label>
            </div>

            <!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
            <p class="help-block" ng-show="userFormRow.service-{{$index}}.$invalid">A service must be selected!</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

这里是完整的代码示例。http://codepen.io/chrismbarr/pen/eNoGLJ?editors=101检查控制台是否有错误

Answer 1

您应该使用 bracket notation 访问变量对象属性:

ng-show="userFormRow['service-' + $index].$invalid"

与 ngClass 相同：

ng-class="{'has-error': userFormRow['service-' + $index].$invalid }"

演示：http://codepen.io/anon/pen/rVbYpG?editors=100

Angular 带有 ng-repeat 的单选按钮验证

Angular radio button validation with an ng- repeat

radio-button

angularjs

angularjs-validation