編輯ng-repeat中的一個項目

Question

到目前爲止，我已經成功地創建了一個從ng-repeat中刪除元素並切換窗體的函數。我無法弄清楚如何編輯ng-repeat中的給定元素。

理想情況下，我想單擊元素，並使表單顯示輸入中已有的值。因此，所有用戶需要做的是編輯所需的字段，單擊提交，然後將新更新的項目添加回原來的陣列。

這是我想出來的：

<div ng-app="testApp"> 
    <div ng-controller="testCtrl as vm"> 
    <form ng-show="vm.showEditForm"> 
     <input type="text" /> 
     <input type="text" /> 
     <button ng-click="vm.update()">Submit</button> 
    </form> 
    <table> 
     <tr> 
     <th>Name</th> 
     <th>Description</th> 
     </tr> 
     <tr ng-repeat="item in vm.list"> 
     <td> 
      {{item.name}} 
     </td> 
     <td> 
      {{item.desc}} 
      <span ng-click="vm.toggleEditForm()">E</span> 
      <span ng-click="vm.removeItem($index)">X</span> 
     </td> 
     </tr> 
    </table> 
    </div> 
</div> 

和：

angular 
    .module('testApp', []) 
    .controller('testCtrl', testCtrl) 
    .service('testSrvc', testSrvc); 

function testCtrl(testSrvc) { 
    var vm = this; 
    vm.list = testSrvc.list; 

    vm.removeItem = function(idx) { 
    testSrvc.remove(idx); 
    } 

    vm.showEditForm = false; 
    vm.toggleEditForm = function() { 
    vm.showEditForm = !vm.showEditForm; 
    }; 

    vm.update = function() { 
    // ??? 
    } 
} 

function testSrvc() { 
    this.list = [ 
    { 
     name: 'asdf', 
     desc: 'lorem ipsum dolor' 
    }, 
    { 
     name: 'qwerty', 
     desc: 'lorem ipsum amet' 
    } 
    ]; 

    this.remove = function(itemIndex) { 
    this.list.splice(itemIndex, 1); 
    }; 

    this.edit = function() { 
    this.list.splice() //??? 
    } 
} 

Answer 1

你需要告訴這項目要編輯。所以它應該是

<span ng-click="vm.edit(item)">E</span> 

那麼這個功能應該存儲項目的副本中某些變量編輯：

vm.edit= function(item) { 
    vm.editedItem = angular.copy(item); 
}; 

而且形式應綁定此文件副本：

<input type="text" ng-model="vm.editedItem.name"/> 
<input type="text" ng-model="vm.editedItem.desc"/> 

然後，保存方法應找回數組中的原始項目（感謝其ID或索引），並複製編輯的字段vm.editedItem。

Answer 2

angular 
 
    .module('testApp', []) 
 
    .controller('testCtrl', testCtrl) 
 
    .service('testSrvc', testSrvc); 
 

 
function testCtrl(testSrvc) { 
 
    var vm = this; 
 
    vm.list = testSrvc.list; 
 
    this.index1 = -1; 
 
    vm.removeItem = function(idx) { 
 
    testSrvc.remove(idx); 
 
    } 
 

 
    vm.showEditForm = false; 
 
    vm.toggleEditForm = function(item,index) { 
 
    this.show = true; 
 
    this.index1 = index; 
 
    }; 
 

 
    vm.update = function(item,index) { 
 
    vm.list[index].name = item.name; 
 
    vm.list[index].desc = item.desc; 
 
    this.index1 = -1; 
 
    } 
 
} 
 

 
function testSrvc() { 
 
    this.show = false; 
 
    this.list = [ 
 
    { 
 
     name: 'asdf', 
 
     desc: 'lorem ipsum dolor' 
 
    }, 
 
    { 
 
     name: 'qwerty', 
 
     desc: 'lorem ipsum amet' 
 
    } 
 
    ]; 
 

 
    this.remove = function(itemIndex) { 
 
    this.list.splice(itemIndex, 1); 
 
    }; 
 

 
    this.edit = function(index) { 
 
    this.show = true; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="testApp"> 
 
    <div ng-controller="testCtrl as vm"> 
 
    <form ng-show="vm.showEditForm"> 
 
     
 
    </form> 
 
    <table> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Description</th> 
 
     </tr> 
 
     <tr ng-repeat="item in vm.list" > 
 
     <td> 
 
      {{item.name}} 
 
     </td> 
 
     <td> 
 
      {{item.desc}} 
 
      <span ng-click="vm.toggleEditForm(item,$index)">E</span> 
 
      <input ng-show="vm.index1 == $index" type="text" ng-model="item.name" /> 
 
      <input ng-show="vm.index1 == $index" type="text" ng-model="item.desc" /> 
 
      <button ng-show="vm.index1 == $index" ng-click="vm.update(item,$index)">Submit</button> 
 
      <span ng-click="vm.removeItem($index)">X</span> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>