从NG-重复编辑条目 [英] Editing an item from ng-repeat

问题描述

到目前为止，我已经成功地创建一个函数，可以消除纳克重复的元素，切换的形式。我无法弄清楚如何编辑在NG-重复一个给定的元素。

在理想情况下，我想在输入已点击元素，并有表演形式与现有的价值。让所有的用户需要做的是哪个领域所需的编辑，点击提交，然后是最近更新的项目被添加回到它原本是数组。

这是什么我已经出来了：

 ＆LT; D​​IV NG-应用=testApp＆GT;
  ＆LT; D​​IV NG控制器=testCtrl为VM＆GT;
    ＆LT;形式NG秀=vm.showEditForm＆GT;
      ＆LT;输入类型=文本/＆GT;
      ＆LT;输入类型=文本/＆GT;
      ＆LT;按钮NG点击=vm.update（）＆GT;提交＆LT; /按钮＆GT;
    ＆LT; /表及GT;
    ＆LT;表＆gt;
      ＆所述; TR＆GT;
        ＆LT;第i个姓名和LT; /第i
        ＆LT;第i说明＆LT; /第i
      ＆LT; / TR＆GT;
      ＆LT; TR NG重复=项vm.list＆GT;
        ＆所述; TD＆GT;
          {{项目名}}
        ＆LT; / TD＆GT;
        ＆所述; TD＆GT;
          {{item.desc}}
          ＆LT;跨度NG点击=vm.toggleEditForm（）＆GT; E＆LT; / SPAN＆GT;
          ＆LT;跨度NG点击=vm.removeItem（$指数）＆GT; X＆LT; / SPAN＆GT;
        ＆LT; / TD＆GT;
      ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和

 角
  .module（'testApp'，[]）
  .controller（'testCtrl'，testCtrl）
  。服务（'testSrvc'，testSrvc）;功能testCtrl（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 = [
    {
      名称：ASDF，
      说明：Lorem存有悲
    }，
    {
      名称：QWERTY键盘，
      说明：Lorem存有阿梅德
    }
  ];  this.remove =功能（的ItemIndex）{
    this.list.splice（的ItemIndex，1）;
  };  this.edit =功能（）{
    this.list.splice（）//？
  }
}
 

解决方案

您需要告诉这项目要编辑。所以应该

 ＆LT;跨度NG点击=vm.edit（项目）＆GT; E＆LT; / SPAN＆GT;
 

那么这个功能应该存储项目的副本某些变量编辑：

  vm.edit =功能（项目）{
  vm.editedItem = angular.copy（项目）;
};
 

和形式应绑定此文件复制：

 ＆LT;输入类型=文本NG模型=vm.editedItem.name/＆GT;
＆LT;输入类型=文本NG模型=vm.editedItem.desc/＆GT;
 

然后保存方法应该找回阵列（由于其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-重复编辑条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！