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-repeat中的ng-class（$ valid）不适用于通过ng-include动态加载的表单

2 个答案: