javascript - Angular ng-repeat错误显示

我在form标记内有以下代码，我想在复选框下方显示一些错误文本，但是目前我无法使其与下面的当前设置配合使用。我在这里做错了什么？

ticketing / competition_checkboxes.html

<div ng-repeat="compCbx in competitionCheckboxes track by $index">
    <input ng-attr-id="cc_comp_{{ $index }}" ng-model="compCbx.isChecked" name="cc_comp" ng-attr-label="cc_comp_label_{{ $index }}"
           type="checkbox" ng-required="compCbx.checkRequired" ng-checked="compCbx.isChecked" form-blur />
    <label ng-attr-id="cc_comp_label_{{ $index }}" ng-attr-for="cc_comp_{{ $index }}" class="fake-label">
        <i ng-attr-id="cc_comp_cbx_{{ $index }}"></i> <p ng-bind-html="compCbx.text | to_trusted"></p>
        <span class="error-msg error-tnc" ng-show="{{formName}}.cc_comp.$touched && {{formName}}.cc_comp.$error.required">
            You must agree to enter the competition
        </span>
    </label>
</div>

该页面上的当前输出为





如您所见，“条款和条件”复选框已正确验证，但这是因为它不在ng-repeat中

条款和条件具有此代码

<input id="cc_tnc" ng-model="cc_tnc" label="cc_tnc_label" name="cc_tnc" type="checkbox" ng-required="cc_tnc != true" form-blur>
        <label id="cc_tnc_label" for="cc_tnc" class="fake-label">
            <i id="cc_tnc_cbx"></i> <p>I have read and agree to <a href="@Model.TermsUrl" target="_blank">terms and conditions</a></p>
            <span class="error-msg error-tnc" ng-show="{{ formName }}.cc_tnc.$touched && {{ formName }}.cc_tnc.$error.required">
                    You must agree to the Terms and Conditions to make a purchase
            </span>
        </label>
<ng-include src="'ticketing/competition_checkboxes.html'"></ng-include>

表单模糊指令

directive('formBlur', function(setErrorState) {

        //set element on dirty
        return {
            restrict: 'A,E',
            require: ['^form'],
            link: function(scope, element, attrs, ctrl) {

                var form = scope[ctrl[0].$name];

                element.bind('blur', function() {

                    scope.$apply(function() {

                        console.log("Error in blur");
                        form[attrs.name].$touched = true;
                        setErrorState(element, form[attrs.name].$valid);

                    });
                });

                scope.$watch(form.$name + '.' + attrs.name + '.$valid', function(validity) {

                    console.log("In watch");
                    console.dir(form[attrs.name]);
                    if (form[attrs.name].$touched)
                        setErrorState(element, validity);

                });
            }
        };
    })

最佳答案

将ng-required="compCbx.checkRequired"更改为required="compCbx.checkRequired"

Jsfiddle working sample

我不知道为什么它起作用;）