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

【问题标题】：ng-class ($valid) within ng-repeat does not work on dynamically loaded forms via ng-includeng-repeat 中的 ng-class ($valid) 不适用于通过 ng-include 动态加载的表单
【发布时间】：2015-11-30 12:28:46
【问题描述】：

$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>

【问题讨论】：

标签： angularjs validation ng-repeat ng-class angularjs-ng-include

【解决方案1】：

通过

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

$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

【讨论】：

谢谢你，但我现在可以了。完整的表格必须（带有表格标签）在外部文件上。我正在尝试捕捉 form1、form2 等的加载时间。
@Vienna 你能详细说明一下吗？我没有得到你的加载时间
当$valid 尝试执行验证时页面中没有form1，它会在之后加载，因此$valid 对它没有影响
但这是一个解决方案，也许我们会以这种方式这样做，谢谢！
最近我遇到了这个github.com/Selmanh/angularjs-form-builder。您可以寻找自定义表单生成器

【解决方案2】：

试试这个

<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;
  }
 }

【讨论】：

不幸的是同样的效果见这里：plnkr.co/edit/SGgO95lCZahCo4mbJHCb?p=preview。一些表单名称之间没有联系..
@Vienna 更新了我的答案。看看吧。
仍然无法正常工作，不幸的是，form1 在验证时不存在..