用動態數據處理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。