Javascript AngularJS在ng-*语句中使用变量_Javascript_Angularjs

Javascript AngularJS在ng-*语句中使用变量

javascript angularjs

Javascript AngularJS在ng-*语句中使用变量,javascript,angularjs,Javascript,Angularjs,我使用AngularJS 1.5，我想使用ng repeat构建一个表单现在，我的代码中有： <div class="form-group" ng-class="{'has-error': Form.field1.$dirty && Form.field1.$invalid}"> <label class="control-label"> Label 1 required <span class="symbol required">

我使用AngularJS 1.5，我想使用ng repeat构建一个表单

现在，我的代码中有：

<div class="form-group" ng-class="{'has-error': Form.field1.$dirty && Form.field1.$invalid}">
     <label class="control-label"> Label 1 required <span class="symbol required"></span> </label>
     <input type="text" class="form-control" ng-model="model.field1" ng-required="currentStep == 2" ng-blur="function1()">
     <span class="error" ng-if="Form.field1.$dirty && Form.field1.$error.required">Field required !</span>
</div>
<div class="form-group">
     <label class="control-label"> Label 2 not required </label>
     <input type="text" class="form-control" ng-model="model.field2">
 </div>
 ....

所以我试过这样的方法：

$scope.myForm= [{
    'type': 'text',
    'name': 'field1',
    'required': true,
    'label': 'My field 1',
    'ng': [{'ng-blur': 'function1'}]
}, {
    'type': 'text',
    'name': 'field2',
    'required': false,
    'label': 'My field 2',
}];

<div ng-repeat="field in myForm" class="form-group {field.name}}" ng-class="{'has-error': Form.{{ field.name }}.$dirty && Form.{{ field.name }}.$invalid}">
    <label class="control-label">{{ field.label }}</label>
    <input type="text" class="form-control" name="{{ field.name }}" ng-model="adherent.{{ field.name }}" ng-required="currentStep == 2">
    <span ng-if="{{ field.required }}" class="error text-small block" ng-if="Form.numeroSecuriteSociale.$dirty && Form.numeroSecuriteSociale.$error.required">Field required !</span>
</div>


{{field.label}
需要字段！

但我当然有语法错误。。。我必须创建一个指令吗？或者要使用ng init？

您可以为您的ng模型使用不同的对象语法。这应该可以做到：

ng-model="adherent[field.name]"

您可以为ng模型使用不同的对象语法。这应该可以做到：

ng-model="adherent[field.name]"

不要使用

ngInit

！！！它有两个非常特殊的用途，真的不应该用于任何其他用途：

实际上，您有一些语法错误：

缺少第二个开口花括号：

class="form-group {field.name}}"

另外，我很确定这是行不通的：

ng-class="{'has-error': Form.{{ field.name }}.$dirty ...

ngClass

未设置为以您尝试使用的方式进行插值。你基本上是这样写的：

ng-class="{'has-error': Form."exampleFieldName".$dirty

这是行不通的

您最好编写一个指令或组件，并使用ng repeat。使用这种方法更有意义，而且更容易实现。最终你会想要这样的东西：

$scope.myForm= [{
  'type': 'text',
  'name': 'field1',
  'required': true,
  'label': 'My field 1',
  'ng': [{'ng-blur': 'function1'}],
  model: {}
}, {
  'type': 'text',
  'name': 'field2',
  'required': false,
  'label': 'My field 2',
  model: {}
}];

<my-form-field field="field" ng-model="field.model" ng-repeat="field in myForm"></my-form-field>

$scope.myForm=[{
“类型”：“文本”，
“名称”：“字段1”，
“必需”：true，
“标签”：“我的字段1”，
'ng'：[{'ng-blur'：'function1'}]，
模型：{}
}, {
“类型”：“文本”，
“名称”：“字段2”，
“必需”：false，
“标签”：“我的字段2”，
模型：{}
}];

看看这是多么容易写和读？关于实际编写指令/组件。。。这可能是一个相当大的挑战。我相信，如果你在谷歌上搜索一下，你会发现有人就这个主题写过博客。