Editing an item from ng-repeat

问题:

So far I've been successful in creating a function that removes an element from ng-repeat and to toggle a form. I can't figure out how to edit a given element in that ng-repeat.

Ideally, I'd like to click on the element, and have the form show with the existing values already in the input. So that all the user needs to do is edit whichever fields desired, click submit and that newly updated item is then added back to the array where it originally was.

This is what I've come up with:

<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>

and:

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() //???
  }
}

回答1:

You need to tell which item you want to edit. So it should be

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

Then this function should store a copy of that item to edit in some variable:

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

And the form should be bound to this item copy:

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

Then the save method should find back the original item in the array (thanks to its ID or index), and copy the edited fields from vm.editedItem.

回答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>