Html 如何在AngularJS中计算具有动态名称的表单的有效属性

我用angular JS动态生成了一个表单。我正在使用

channel.tabNames

来确保在循环中生成的多个表单不会出现重复的字段名

<form ng-repeat="channel in ctr.model.mediaChannels" 
      novalidate 
      id="{{channel.tabName}}form" 
      name="{{channel.tabName}}form" 

---

您可以将
ng repeat
的
$index
属性用于唯一的id。此外，为所有表单创建一个数组，然后使用唯一的
$index
访问每个表单会更容易：

<form ng-repeat="channel in vm.data" novalidate id="form{{$index}}" name="vm.forms.form{{$index}}">

<input type="text" 
       name="overrideComments" 
       ng-required="true" 
       ng-class="{'has-error': vm.forms['form'+$index].overrideComments.$invalid 
       && vm.forms['form'+$index].$submitted}" 
       ng-model="overrideComments" />

<input class="btn btn-success p-2" 
       type="submit" 
       value="Add To Basket" 
       ng-click="vm.addToBasket($index)" />


检查工作演示：
您可以使用
ng repeat
的
$index
属性来获得唯一id。此外，为所有表单创建一个数组，然后使用唯一的
$index
访问每个表单也会更容易：

<form ng-repeat="channel in vm.data" novalidate id="form{{$index}}" name="vm.forms.form{{$index}}">

<input type="text" 
       name="overrideComments" 
       ng-required="true" 
       ng-class="{'has-error': vm.forms['form'+$index].overrideComments.$invalid 
       && vm.forms['form'+$index].$submitted}" 
       ng-model="overrideComments" />

<input class="btn btn-success p-2" 
       type="submit" 
       value="Add To Basket" 
       ng-click="vm.addToBasket($index)" />


检查工作演示：
避免在AngularJS表达式中使用双花括号（
{{}
）：

<input type="text" name="overrideComments" ng-required="true" 
    ng-class="{'has-error': ̶v̶m̶.̶f̶o̶r̶m̶s̶.̶f̶o̶r̶m̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶.̶o̶v̶e̶r̶r̶i̶d̶e̶C̶o̶m̶m̶e̶n̶t̶s̶.̶$̶i̶n̶v̶a̶l̶i̶d̶
                            vm.forms['form'+$index].overrideComments.$invalid }" 
    ng-model="channel.mediaSummary.overrideComments" />



有关详细信息，请参阅



避免在AngularJS表达式中使用双花括号（
{{}
）：

<input type="text" name="overrideComments" ng-required="true" 
    ng-class="{'has-error': ̶v̶m̶.̶f̶o̶r̶m̶s̶.̶f̶o̶r̶m̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶.̶o̶v̶e̶r̶r̶i̶d̶e̶C̶o̶m̶m̶e̶n̶t̶s̶.̶$̶i̶n̶v̶a̶l̶i̶d̶
                            vm.forms['form'+$index].overrideComments.$invalid }" 
    ng-model="channel.mediaSummary.overrideComments" />



有关详细信息，请参阅



这太酷了，我不知道可以使用名称将控制器上的对象绑定到表单上。。很不错的！这太酷了，我没想到你可以用这个名字把控制器上的对象绑定到表单上。。很不错的！
<input type="text" name="overrideComments" ng-required="true" 
    ng-class="{'has-error': ̶v̶m̶.̶f̶o̶r̶m̶s̶.̶f̶o̶r̶m̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶.̶o̶v̶e̶r̶r̶i̶d̶e̶C̶o̶m̶m̶e̶n̶t̶s̶.̶$̶i̶n̶v̶a̶l̶i̶d̶
                            vm.forms['form'+$index].overrideComments.$invalid }" 
    ng-model="channel.mediaSummary.overrideComments" />