用动态数据处理ng-repeat

Question

我有一个关于angularjs的查询，即我有一个表，其中有行，但这些行是由用户动态插入的。这意味着如果我有一个公司拥有多个所有者，那么我允许他们添加尽可能多的所有者，只需点击与文本框放置的添加按钮（即姓名，电子邮件，数字文本框） 我已经使用' ng-repeat'，以便可以逐个动态地添加所有者列表。从数据库获取值时，它工作得很好，但当我尝试通过单击“添加”按钮来添加值时，它将新行添加了所有文本框，但是与上一行相同。我认为这是因为我已经使用ng-model来链接数据..但是那么这是我可以绑定数据的唯一选择。是否有人对此问题有解决方案。请帮帮我。 预先感谢您 我分享代码示例为了更好的理解，

JSP代码：

<tbody id="insertionRow"> 
    <tr> 
     <th>#</th> 
     <th class="required">Name</th> 
     <th>Email</th> 
     <th>Phone No</th> 
     <th>Add</th> 
     <th>Delete</th> 

    </tr> 
    <tr data-ng-repeat="c in ctrl.client.clientOwnerVOList"> 
     <td>{{$index + 1}}</td> 

     <td class="col-lg-3"><input type="Text" 
      class="form-control" 
      data-ng-model="c.clientOwnerName" 
      name="clientOwnerName{{$index + 1}}" id="Name"> 

      </td> 

     <td class="col-lg-4"><input type="Email" 
      class="form-control" 
      data-ng-model="c.clientOwnerEmail" 
      name="clientOwnerEmail{{$index + 1}}" id="Email"></td> 

     <td class="col-lg-3"><input type="Text" 
      class="form-control" 
      data-ng-model="c.clientOwnerPhone" 
      name="clientOwnerPhone{{$index + 1}}" id="PhoneNo"></td> 

     <td> 
     <button type="button" 
       data-ng-click="insert();" 
       class="btn btn-sm btn-default"> 
       <i class="fa fa-plus fa-lg"></i> 
      </button></td> 

     <td><button type="button" 
        onClick="$(this).closest('tr').remove();" 
       class="btn btn-sm btn-default"> 
       <i class="fa fa-trash fa-lg "></i> 
      </button></td> 

    </tr> 
</tbody> 

AngularJS控制器代码：

$scope.insert = function(){ 
    var tableRow ="<tr data-ng-repeat='c in ctrl.client.clientOwnerVOList'>"+ 
    "<td>"+i+"</td>"+ 
    "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerName' name='clientOwnerName{{$index + 1}}' ></td>"+ 
    "<td class='col-lg-4'><input type='Email' class='form-control' data-ng-model='c.clientOwnerEmail' name='clientOwnerEmail{{$index + 1}}'</td>"+ 
    "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerPhone' name='clientOwnerPhone{{$index + 1}}' ></td>"+ 
    "<td><button type='button' data-ng-click='insert()' class='btn btn-sm btn-default'><i class='fa fa-plus fa-lg'></i></button></td>"+ 
    "<td><button type='button' class='btn btn-sm btn-default' onClick=$(this).closest('tr').remove();><i class='fa fa-trash fa-lg '></i></button></td>"+ 
    "</tr>"; 

    var compiledString = $compile(tableRow)($scope); 

    $("#insertionRow").append(compiledString); 
    i++; 
}; 

和客户对象如下

self.client= { 
    clientID:'', 
    clientName:'', 
    clientDescription:'', 
    clientAddressLine:'', 
    clientContactPersonPhone:'', 
    createdOn:'', 
    astUpdatedOn:'', 
    country:'', 
    state:'', 
    city:'', 
    isDeleted:'', 
    clientOwnerVOList: [ 
     { 
      clientOwnerID:'', 
      createdOn:'', 
      isDeleted:'' ,       
      clientOwnerName:'', 
      clientOwnerPhone:'', 
      clientOwnerEmail:'' 
     } 
    ] 
} 

Answer 1

我试图重现这个plunker您的问题： https://plnkr.co/edit/Eqw21bGNetGtHZIQZCYw?p=preview

我改变您的插入函数来创建新的clientOwnerVO。

我只是把新的对象是这样的：

$scope.client.clientOwnerVOList.push({clientOwnerID:'', 
       createdOn:'', 
       isDeleted:'' ,       
       clientOwnerName:'' 
       ,clientOwnerPhone:'' 
       ,clientOwnerEmail:'',}); 
       i++; 

我希望我理解您的问题

Answer 2

插入功能很奇怪。 AFAIT您将一些编译的HTML插入到DOM中。 Angular的整个事情是让你避免手动做这件事。你应该直接改变ctrl.client.clientOwnerVOList，把所需的J​​S对象附加到它上面，然后这个改变会被DOM反映出来。

该代码应该看起来类似于此，加减应用程序特定的逻辑，你知道更好。

$scope.append = function() { 
    self.client.clientOwnerVOList.push({ 
    clientOwnerId: 'newid', 
    createdOn: 'today', 
    isDeleted: 'false', 
    clientOwnerName: 'foo', 
    clientOwnerPhone: 'bar', 
    clientOwnerEmail: 'foo@bar.com' 
    }); 
} 

填充客户端信息的值会从其他地方（其他车型领域，或者一些合理的默认值等）

基本上采取，你有一堆数据（self.client，以及来自范围的任何其他控制器变量）。该视图是这些数据的函数，并且描述了如何通过可访问范围字段的html模板构建DOM。 Angular的工作是弄清楚如何做到这一点。每当发生某种事件时，例如按下按钮或网络事件等，您就更新数据，然后Angular为您重新生成DOM。