ng-класс ($valid) в ng-repeat не работает на динамически загружаемых формах через ng-include

$valid не работает на динамически загружаемых формах через ng-include или я делаю ошибку (я не могу изменить стиль Box при проверке формы):

Вот плункер: 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>
Источник

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>

Рабочая плункерная ссылка

Источник

Попробуй это

<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;
  }
 }
Источник
Другие вопросы по тегам