AngularJS - 将$ setValidity与ng-repeat指令一起使用

I am having a bit of a problem (mostly because of my lack of knowledge of AngularJS directives). I am using the Rating Directive directive from the UI Bootstrap library combined with my own custom validation. Multiple rating directive instances are created using ng-repeat from an object array from my controller. I use other scope variables to set the default "Rate Me" text, the custom CSS classes 'ratingOptions.ratingStates' and the max value limitiations 'ratingOptions.max'. All is working as desired... This is my directive code in the view (please note that the container form is called "categoryRatingFrom":

我遇到了一些问题(主要是因为我对AngularJS指令缺乏了解)。我正在使用UI Bootstrap库中的Rating Directive指令以及我自己的自定义验证。使用来自控制器的对象数组中的ng-repeat创建多个评级指令实例。我使用其他范围变量来设置默认的“Rate Me”文本,自定义CSS类的“ratingOptions.ratingStates”和最大值限制“ratingOptions.max”。一切都按预期工作......这是我在视图中的指令代码(请注意容器表单称为“categoryRatingFrom”:

<div data-ng-repeat="cats in categories">
    <div data-ng-form name="RatingFrom">
        <div class="row no-bottom-padding">
            <label class="col-sm-4 control-label">@{{ cats.name }}</label>

            <div class="col-sm-8">

                <div class="no-outline"
                     data-rating
                     data-ng-model="cats.value"
                     data-max="ratingOptions.max"
                     data-rating-states="ratingOptions.ratingStates"
                     data-on-hover="cats.onHover(value)"
                     data-on-leave="cats.onLeave()"
                     data-rating-validate > <!-- Notice the custom directive -->
                </div>
                @{{ cats.hoverState || cats.items[cats.value - 1].name || rateMe }}
            </div>
        </div>
    </div>
</div>

Now I wish to set the directive instance to invalid should a value not being set, the default value is zero but the user must enter a value from 1 to ratingOptions.max (which is currently 6). I have a custom directive to validate this called ratingValidate. This is being invoked/bootstrapped and I am able to determine the current value of each directive instance, however I wish to initially set the directive/form-item to invalid and once the user selects a value we set the directive /form-item/instance to valid. This should be fairly easy but with using an ng-repeat I am unsure how to reference the specific form item. If anyone could help explain what I need to do whilst I experiment and search the AngularJS docs I would be most appreciative. This is my directive...

现在我希望在没有设置值的情况下将指令实例设置为无效,默认值为零,但用户必须输入从1到ratingOptions.max(当前为6)的值。我有一个自定义指令来验证这个名为ratingValidate的命令。这是被调用/引导的,我能够确定每个指令实例的当前值,但是我希望最初将指令/表单项设置为无效,一旦用户选择了一个值,我们就设置了指令/表单项/实例有效。这应该相当容易,但使用ng-repeat我不确定如何引用特定的表单项。如果有人能帮助解释我在实验和搜索AngularJS文档时需要做什么,我将非常感激。这是我的指示......

angular.module('myApp')
    .directive('ratingValidate', function () {

       // ratingValidate
        return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController
            link: function (scope, element, attrs, ngModel) {

                // do nothing if no ng-model
                if (!ngModel) {
                    return;
                }

                // Listen for change events to enable binding
                element.bind('click change', function () {

                    console.log(element[0], attrs);
                    if(attrs.ariaValuenow === 0){
                        ngModel.$setValidity('', false); // What goes here??? How do I reference the item?
                    } else {
                        ngModel.$setValidity('', false); // What goes here??? How do I reference the item?
                    }

                });

            }
        };
    })
;

2 个解决方案

#1

How Angular Validation Works

Angular uses the 'name' attribute to create the $scope variables used for validation.

Angular使用'name'属性来创建用于验证的$ scope变量。

For example, if you have an input field with a 'required' attribute:

例如,如果您有一个带有'required'属性的输入字段:

<form name="myform">
   <input name="firstname" ng-model="firstname" type="text" required/>
</form> 

Then to access the validation properties on $scope, you would do:

然后,要访问$ scope上的验证属性,您将执行以下操作:

var validationFailed = $scope.myform.firstname.$error.required;

Where $error is an object that has 'required' as a Boolean property.

其中$ error是一个'required'作为布尔属性的对象。

In the 'required' directive, you would see something like this:

在'required'指令中,您会看到如下内容:

                if(attrs.value == ''){
                    ngModel.$setValidity('required', true); // failed validation
                } else {
                    ngModel.$setValidity('required', false); // passed validation
                }

You can pass any string to $setValidity, and it will set the $error property for you. For example, if you did:

您可以将任何字符串传递给$ setValidity,它将为您设置$ error属性。例如,如果您这样做:

$setValidity('test', true)

Then there would be an $error property named 'test' and it would be set to true. You can then access the property like this:

然后会有一个名为'test'的$ error属性,它将被设置为true。然后,您可以像这样访问该属性:

$scope.myform.firstname.$error.test

Other validation properties that are available are:

其他可用的验证属性包括:

$scope.myform.firstname.$valid
$scope.myform.firstname.$invalid
$scope.myform.firstname.$pristine
$scope.myform.$valid
$scope.myform.$invalid
$scope.myform.$pristine

Hope this helps to answer your question.

希望这有助于回答您的问题。

#2

To overcome this I added the following to the directive HTML:

为了解决这个问题,我在指令HTML中添加了以下内容:

name="rating@{{$index}}

and in the directive

并在指令中

ngModel.$setValidity(attrs.name, true); // or false depending on the condition