angularjs передачи параметров через директиву и нг-повтор

Question

Давайте попробуем еще раз:

вот рабочий plunker: http://plnkr.co/edit/RTrdsLY8ONoeDLPYSFJi?p=preview

Но поля связаны друг с другом.

, когда смотришь на DOM:

<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="fieldName" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required=""> 
                                 ^^^^^^^^^^ 

конечно! У всех есть имя = "fieldName"!

Но почему !? он должен быть first_name, last_name и age!

Да, есть ошибка в шаблоне formField.html:

<input class="form-control" type="{{fieldType}}" name="fieldName" ng-model="fieldName" ng-minlength=3 ng-maxlength=20 required/> 
                 ^^^^^^^^^^^ 

Итак, давайте изменим его в {{FIELDNAME}}. И, следовательно, все вхождения form.fieldName ... в форму. {{FieldName}}.

Ну, где пропала красная рамка?

Давайте посмотрим на DOM -

<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="first_name" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required=""> 

имя в порядке, но теперь-ошибка не работает ...

Answer 1

Update: Вы можете использовать функцию, как это, чтобы принести свои Params от модели. (Accroding к вашей структуре данных)

другой раздвоенный plunker: http://plnkr.co/edit/mdKBoEffoUo2ilH7Jd3L?p=preview

$scope.getModels = function(items) { 
    var params = {}; 

    if (angular.isArray(items)) { 
    for (var i = 0; i < items.length; i++) { 
     var item = items[i]; 

     if(angular.isArray(item.fields)) { 
     for (var j = 0; j < item.fields.length; j++) { 
      var field = item.fields[j]; 
      params[field.id] = field.model; 
     } 
     } 
    } 
    } 

    alert(JSON.stringify(params, '', 4)); 
}; 

---

Поскольку динамическое ввода имени не было реализовано (Relatived PR here), я вставил вложенную ng-form для проверки. И потому, что, я думаю, вам нужно управлять представлением формы самостоятельно, используя ngModel.

Проверьте раздвоенный exmaple здесь: http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=preview

Шаблон:

<div class="form-group" ng-form="form" ng-class="{true: 'has-error', false: 'has-success'}[form.fieldName.$invalid]"> 
    <label class="control-label col-sm-2" for="fieldName">{{fieldLabel}}</label> 
    <div class="col-sm-6"> 
     <input class="form-control" type="{{fieldType}}" placeholder="enter valid name" name="fieldName" ng-model="fieldModel" ng-minlength=3 ng-maxlength=20 required/> 
     <span class="help-block"> 
     <span ng-show="form.fieldName.$error.required">Required field</span> 
     <span ng-show="form.fieldName.$error.minlength">Too few chars - min is (6)</span> 
     <span ng-show="form.fieldName.$error.maxlength">Too much chars - max is (20)</span> 
     &nbsp; 
     </span> 
    </div> 
</div> 

HTML:

<form-field ng-repeat="field in tabItem.fields" ng-model='field.model' 
    field-type="field.type" field-name='field.id' field-label='field.label'> 
</form-field> 

JS:

KPNDirectives.directive("formField", function() { 
    return { 
     restrict: 'E', 
     scope: { 
     fieldModel: '=ngModel', 
     fieldType: '=', 
     fieldLabel: '=', 
     fieldName: '=' 
     }, 
     templateUrl: 'formField.html' 
    }; 
}); 

Answer 2

Я не уверен, если ваше использование директивы нг-класс правильно. Поместите имя класса сначала и после «переменной». Попробуйте использовать:

ng-class="'my-class-name': true"