Question

让我们再试一次：

这是一个有效的工作人员： 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="">
                                                                                                                         ^^^^^^^^^^

当然！所有人都有name =“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

更新：您可以使用此类函数从模型中获取参数。（根据您的数据结构）

另一个分叉的掠夺者：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自行管理表单提交。

在此检查分叉的例子：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指令是否正确。首先将类名放在“变量”之后。尝试使用：

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

angularjs通过指令和ng-repeat传递参数

2 个答案: