验证AngularJS中动态命名的输入字段

问题描述

我在ng-repeat内有一个输入字段，它得到一个动态名称标签，如下所示：

<div ng-repeat="a in b track by $index">
  <div show-errors >
    <label for="new_taxid_abroad_{{$index}}"> Bla </label>

    <input name="new_taxid_abroad_{{$index}}" ng-model="xxx" type="text">
  </div>
</div>

显示错误验证器如下所示：

.directive('showErrors',function($timeout) {

    var validate = function($element,valid) {
        $element.toggleClass('has-error',!valid);
        $element.toggleClass('has-success',valid);
    };

    return {
        restrict: 'A',require: '^form',controller: function($scope,$element,$attrs) {
            this.$validate = function(name) {
                validate($element,name);
            };
        },link: function($scope,$attrs,formCtrl) {
            // find the text Box element,which has the 'name' attribute
            var inputEl = $element[0].querySelector("[name]");
            // convert the native text Box element to an angular element
            var inputNgEl = angular.element(inputEl);
            // get the name on the text Box so we kNow the property to check
            // on the form controller
            var inputName = inputNgEl.attr('name');

            var validateEvent = function(evt,name) {
                if (name && name != inputName)
                    return;

                $timeout(function() {
                    validate($element,formCtrl[inputName] ? formCtrl[inputName].$valid : false);
                },0);
            };

            // only apply the has-error class after the user leaves the text Box
            inputNgEl.bind('blur',validateEvent);
            $scope.$on('show-errors-check-validity',validateEvent);
        }
    }
});

我正在尝试使用name tag分别触发每个输入的验证器。到目前为止，{{index}}部分将不会呈现，因此验证器无法正常工作。

According to Github，要能够做到这一点，在1.3之后就已解决，而我正在运行1.5，但到目前为止还算不上运气！

有什么提示吗？

解决方法

这应该对您有用，我相信这与您如何建立名称有关。

代替<input name="new_taxid_abroad_{{$index}}"

您应尝试构建name="{{'new_taxid_abroad_' + $index}}"之类的字符串

如果您使用括号{{}}，请将所有工作放在其中。

angularjs-directive javascript