ng-class ($valid) 在 ng-repeat 中不适用于通过 ng-include 动态加载的表单

Question

$valid 不适用于通过 ng-include 动态加载的表单，或者我犯了一个错误（我无法在表单验证时更改 Box 的样式）：

这里是 plunker：http://plnkr.co/edit/WA5ohXoMrb5QcUdl0uwe?p=preview

如果文本输入字段已填充，颜色应从黑色更改为绿色。

HTML

<body ng-controller="MainController">

  <div class="menu-mantle">
  <div ng-repeat="item in my.forms" class="menu-box">
      <div class="auWizard-default" ng-class="{
       'auWizard-valid': {{item.form_name}}.$valid,
       'auWizard-invalid': {{item.form_name}}.$invalid}">
      </div>
      <div class="menu-default" ng-click="my.getForm(item.form_name)">
        {{item.form_name}}
      </div>
    </div>
</div>

<h4>Forms will be included below:</h4>
<div class="form-area">
  <h5>{{my.src}}</h5>
  <ng-include src="my.src">
  </ng-include>
</div>
</body>

Answer 1

试试这个

<body ng-controller="MainController">

  <div class="menu-mantle">
  <div ng-repeat="item in my.forms" class="menu-box">
      <div class="auWizard-default" ng-class="{
       'auWizard-valid': isFormValid(item.form_name),
       'auWizard-invalid': !isFormValid(item.form_name)}">
      </div>
      <div class="menu-default" ng-click="my.getForm(item.form_name)">
        {{item.form_name}}
      </div>
    </div>
</div>

<h4>Forms will be included below:</h4>
<div class="form-area">
  <h5>{{my.src}}</h5>
  <ng-include src="my.src">
  </ng-include>
</div>
</body>

在您的控制器中

$scope.isFormValid = function(formName){
 var formSelector = 'form[name='+formName+']';
 var formEle = $(formSelector);
 var formScope = angular.element(formEle).scope();
 if(formScope){
    return formScope[formName].$valid;
  }
 }

Answer 2

通过

跟踪控制器中的当前表单名称

$scope.my.getForm= function (form) {
        $scope.currentform=form;
        $scope.my.src=form+".html";
      }

我将 <form> 标签从单个文件移动到索引文件，现在可以使用了。

     <form name={{currentform}}>
       <ng-include src="my.src">
      </ng-include>
     </form>

Working plunker link

ng-class ($valid) 在 ng-repeat 中不适用于通过 ng-include 动态加载的表单

ng-class ($valid) within ng-repeat does not work on dynamically loaded forms via ng-include

validation

angularjs

ng-repeat

angularjs-ng-include

ng-class