Javascript TypeError:无法读取属性'；字段1'；未定义的？

我想在angularjs中复制模板。就像当我点击添加按钮时，它会添加新表单，当我点击删除按钮时，它会删除表单。当我提交按钮，它发送数据到后端，但它给出的错误

TypeError:无法读取未定义的属性“field1”，原因是它无法获取
$scope.field.field1
值

请看，它不工作了

HTML

<div ng-app="myApp" ng-controller="myCtrl">
 <div class="col-md-12" style="bottom:10px" >   
    <div class="form-group" ng-repeat="field in fields">  
        <div class="col-md-12">
          <div class="col-md-4"> 
              <label class="col-md-12 control-label">Field1</label>
              <div class="col-md-12">
                <input data-ng-model='field.field1' class="chosen-select input-md form-control sme-input-box"/>
              </div>
          </div>          
          <div class="col-md-4">          
            <label  class="col-md-12 control-label">Field2</label>
            <div class="col-md-12">            
                <input ng-model='field.field2'  class="chosen-select input-md form-control sme-input-box"/>
            </div>
          </div>
        </div>

        <div class="col-md-12">            
            <div class="col-md-3">
              <a class="btn btn-success" ng-click="removeTemplate($index)">Remove</a>   
            </div> 
            <div class="col-md-3">
              <a class="btn btn-success" ng-click="updateOrder()">Submit</a>   
            </div>                      
        </div>  
      </div>      
      <div class="col-md-3" style="top:5px">
              <a class="btn btn-success" ng-click="cloneTemplate()">Add</a>   
      </div>   
    </div>  

</div>

您在
ng repeat
中有错误的变量名，它应该是
list1
而不是'fields'

标记

<div class="form-group" ng-repeat="field in list1">

<a class="btn btn-success" ng-click="updateOrder(field)">Submit</a>

代码

$scope.updateOrder = function(field) {
    //pass the field object as is, because it will have field1 & field2
    var config = { server: '/url'}//should be something
    $http.post(config.server, field)
      .success(function(response, status) {
        console.log(response);
      })
      .error(function(response, status) {
        console.log(response);
      })
}

没有
$scope.field，请阅读

您可以在视图中的updateOrder函数中传递$index

<a class="btn btn-success" ng-click="updateOrder($index)">Submit</a>   

是的，我更正了代码，但当我单击“提交”按钮时，它给出了错误。
TypeError:无法读取未定义的属性“field1”，请查看更新的问题…谢谢，现在它正在工作，但是你能告诉我为什么我不能使用
$scope.field.field1
。假设我们不想将相同的字段名发送到后端，那么我们将如何修改..@geeks，因为
ng repeat
有自己的方式来呈现html，同时呈现每个元素的模板，它创建了一个新的作用域，该作用域通常是从当前运行的作用域继承而来的，因此基本上，
字段
值不是在控制器作用域内创建的，而是在不同的作用域中创建的，它是当前作用域的子作用域。@geeks，这是什么意思。您不想将同一字段发送到后端吗？
$index
是由
ng repeat
创建的，因此它也是字段数组的索引，与我想要的相同。我在你的答案里放了这个演示。若我们想根据需求标记按钮，假设对于空模板我想保持提交，对于非空模板我想使用更新。请看
<a class="btn btn-success" ng-click="updateOrder($index)">Submit</a>   

$scope.updateOrder=function(i){
    var updateOrder = {
        "field1":$scope.fields[i].field1,
        "field2":$scope.fields[i].field2,
    };
    .....
};