如何删除使用数组中的项或对象纳克点击？ [英] How do I delete an item or object from an array using ng-click?

问题描述

我想编写一个函数，使我在单击按钮时删除一个项目，但我想我得到的功能迷惑 - 我用 $消化？

HTML和放大器; app.js：

 ＆LT; UL NG重复=BDAY在bdays＆GT;
  ＆LT;立GT;
    ＆LT;跨度NG隐藏=编辑NG点击=编辑=真正的＆GT; {{bday.name}} | {{bday.date}}＆LT; / SPAN＆GT;
    ＆LT;形式NG秀=编辑NG提交=编辑=假＆GT;
      ＆LT;标签＆gt;名称：LT; /标签＆gt;
      ＆LT;输入类型=文本NG模型=bday.name占位符=名称NG-要求/＆GT;
      ＆LT;标签＆gt;日期：＆LT; /标签＆gt;
      ＆LT;输入类型=日期NG模型=bday.date占位符=日期NG-要求/＆GT;
      ＆LT; BR /＆GT;
      ＆LT;按钮类=BTN类型=提交＆GT;保存＆LT; /按钮＆GT;
      ＆LT;一类=BTNNG点击=删除（）＆GT;删除＆LT; / A＆GT;
    ＆LT; /表及GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;$ scope.remove =功能（）{
  。$ scope.newBirthday = $ $范围消化（）;
};
 

解决方案

要删除您需要从数组删除项目，可以通过 BDAY 项目到您的删除功能标记。然后在控制器中查找项目的索引，并从数组中删除

 ＆LT;一类=BTNNG点击=删除（项目）＆GT;删除＆LT; / A＆GT;
 

然后在控制器：

  $ scope.remove =功能（项目）{
  VAR指数= $ scope.bdays.indexOf（项目）;
  $ scope.bdays.splice（指数，1）;
}
 

角将自动检测更改为 bdays 阵列，并做 NG-重复

DEMO： http://plnkr.co/edit/ZdShIA?p=$p$pview

编辑：如果做与服务器实时更新将使用您创建使用 $资源服务管理的同时阵列更新它更新服务器

I am trying to write a function that enables me to remove an item when the button is clicked but I think I am getting confused with the function - do I use $digest?

HTML & app.js:

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

解决方案

To remove item you need to remove it from array and can pass bday item to your remove function in markup. Then in controller look up the index of item and remove from array

<a class="btn" ng-click="remove(item)">Delete</a>

Then in controller:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

Angular will automatically detect the change to the bdays array and do the update of ng-repeat

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

EDIT: If doing live updates with server would use a service you create using $resource to manage the array updates at same time it updates server

这篇关于如何删除使用数组中的项或对象纳克点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！