从 ng-repeat 编辑项目 [英] Editing an item from ng-repeat

问题描述

到目前为止，我已经成功地创建了一个从 ng-repeat 中删除元素并切换表单的函数.我不知道如何编辑该 ng-repeat 中的给定元素.

理想情况下，我想单击元素，并让表单显示输入中已有的值.因此，所有用户需要做的就是编辑所需的任何字段，单击提交，然后将新更新的项目添加回原来所在的数组.

这是我想出来的:

<div ng-controller="testCtrl as vm"><form ng-show="vm.showEditForm"><input type="text"/><input type="text"/><button ng-click="vm.update()">提交</button></表单><表格><tr><th>姓名</th><第>描述</tr><tr ng-repeat="vm.list 中的项目"><td>{{项目名称}}</td><td>{{item.desc}}<span ng-click="vm.toggleEditForm()">E</span><span ng-click="vm.removeItem($index)">X</span></td></tr>

和:

角度.module('testApp', []).controller('testCtrl', testCtrl).service('testSrvc', testSrvc);功能测试Ctrl(testSrvc){var vm = 这个；vm.list = testSrvc.list;vm.removeItem = 函数(idx){testSrvc.remove(idx);}vm.showEditForm = false;vm.toggleEditForm = 函数(){vm.showEditForm = !vm.showEditForm;};vm.update = 函数(){//???}}函数 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()//???}}

解决方案

您需要告诉哪个要编辑的项目.所以应该是

E

然后这个函数应该存储该项目的副本以在某个变量中进行

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

并且表单应该绑定到这个项目副本:

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

然后 save 方法应该找回数组中的原始项(由于它的 ID 或索引)，并从 vm.editedItem 中复制编辑过的字段.

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

解决方案

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.

这篇关于从 ng-repeat 编辑项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！