AngularJS重复输入单选集

Question

我正在尝试让 AngularJS 重复设置相同类型的输入单选字段。

例子：

<form>
     <ul id="group1">
         <li><input type='radio' name='optionRadio'></li>
         <li><input type='radio' name='optionRadio'></li>
     </ul>
     <ul id="group2">
         <li><input type='radio' name='optionRadio'></li>
         <li><input type='radio' name='optionRadio'></li>
     </ul>
</form>

AngularJS 我有：

<form name='testForm'>
    <ul ng-repeat='field in fields' ng-form='subForm'>
        <li><input type='radio' ng-model='subForm.optionRadio' name='optionRadio'>field.name</li>
    </ul>
</form>

问题是当我单击单选按钮时，它会取消选择另一个组中的单选。

我知道问题是 name = optionRadio，但我正在尝试利用 testForm 表单中的 $invalid。

如果我删除 name='optionRadio'，我会忘记需要突出显示哪个表单项以防出错。

我也尝试过单独的表单标签，但我在使用 ng-repeat 和表单标签时遇到了麻烦。

我也尝试将 $index 附加到 name，但表单对象按字面意思接受值。

任何有关如何正确执行此操作的建议将不胜感激。

编辑： http://jsfiddle.net/HB7LU/207/

我做了一个 jsfiddle。我找到了一个可行的解决方案，但不会使用表单验证。

通过检查模型是否有值，我可以获得与错误消息相同的结果。另一种选择是编写自定义指令进行验证，然后检查子表单以查找我要查找的特定错误。

例子：

 <input radioCheck type='radio' name='optionRadio'/>
 <span ng-show='subForm.$error.radioCheck'>Radio check error</span>

Answer 1

您可以在表单控制器上使用 $invalid 属性，而不是在模型控制器上使用 $invalid 属性。即将<span ng-show="subform.inputRadio.$invalid">Error!!!! missing stuff</span>更改为<span ng-show="subform.$invalid">Error!!!! missing stuff</span>

我在使用嵌套重复时为显示验证类而编写的自定义指令遇到了类似的问题。自定义指令不能使用输入名称，因为它们不能是动态的，所以这不起作用：

<ul validation-class-for="choice">
    <li ng-repeat="choice in question.choices">
        <label>
            <input type="radio" name="choice" value="{{choice.text}}"
                   ng-model="$parent.response.choices" required/>
            {{choice.text}}
        </label>
    </li>
</ul>

使用此自定义指令：

angular.module('ngQuestionnaires.validationClassFor', [])
    .directive('validationClassFor', function () {
        return {
            require: '^form',
            link: function (scope, element, attributes, formController) {
                var hasError = 'has-error',
                    hasSuccess = 'has-success';
                scope.$watch(function () {
                    var controller = formController[attributes.validationClassFor] || formController,
                        state;
                    if (controller.$invalid && controller.$dirty) {
                        state = hasError;
                    } else if (controller.$valid && controller.$dirty) {
                        state = hasSuccess;
                    }
                    return state;
                }, function (newState, oldState) {
                    switch (newState) {
                    case hasError:
                    case hasSuccess:
                        element.removeClass(oldState).addClass(newState);
                        break;
                    default:
                        element.removeClass(hasError).removeClass(hasSuccess);
                        break;
                    }
                });
            }
        };
    });

我通过使用嵌套表单、从无线电输入中删除 name 属性并从 validation-class-for 中删除值来解决问题，如下所示：

<ul validation-class-for ng-form="choiceForm">
    <li ng-repeat="choice in question.choices">
        <label>
            <input type="radio" value="{{choice.text}}" 
                   ng-model="$parent.response.choices" required/>
            {{choice.text}}
        </label>
    </li>
</ul>

如果模型控制器在 $watch 函数范围内未定义，则自定义指令中链接函数所需的唯一更改是回退到表单控制器，如下所示：

controller = formController[attributes.validationClassFor] || formController