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

从 ng-repeat 编辑项目

Editing an item from ng-repeat

html

angularjs

ng-repeat