如何在 ng-repeat 中访问表单？

Question

Here 是关于表单的明确示例：

<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<input type="text"
       name="input_{{$index}}_0"></input>
<!-- ... -->

好的，但是我应该如何从表单访问$valid 字段？例如，这不工作：

{{namesForm_$index.$valid}}

即使{{namesForm_$index}} 输出0。

在{{}}解析变量名之前需要“内联”$index。该怎么做？

Answer 1

在单个 {{ }} 表达式中获取它并不容易，但如果您只想在接受没有把手的表达式的指令中使用它（例如 ng-disabled），您可以实现：

<div ng-app>
    <ng-form name="namesForm_{{$index}}" ng-repeat="name in [1, 2]">
      <input type="text" 
             placeholder="{{$index}}"
             ng-required="true"
             ng-model="test"
             name="hey" />
      
      <button ng-disabled="!namesForm_{{$index}}.$valid">
        send
      </button>
     
    <br />
</ng-form>
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

Answer 2

{{ IsFormValid($index) }}

$scope.IsFormValid = function(index) {
   var form = angular.element("formName" + index);
   return form.$valid;
};

更新

工作示例：

{{ IsFormValid($index) }}

$scope.IsFormValid = function(index) {
   var form = angular.element(document.getElementById('#bucketForm-' + index);
   return form.$valid;
};

新方法

以下是动态 ngModel 的示例，表单名称也可以复制：

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
  </div>
</div>