How to remove elements nodes from angular js array

Question

I am trying to remove elements from the array  scope items so that items are removed in the view ng-repeat  item in items   Just for demonstrative purposes here is some code   for i 0 i lt  scope items length i         if  scope items i  name     ted           scope items shift              I want to remove the 1st element from the view if there is the name ted right  It works fine  but the view reloads all the elements  Because all the array keys have shifted  This is creating unnecessary lag in the mobile app I am creating    Anyone have an solutions to this problem

User · Answer

I liked the solution provided by  madhead  However the problem I had is that it wouldn t work for a sorted list so instead of passing the index to the delete function I passed the item and then got the index via indexof  e g    var index    scope items indexOf item    scope items splice index  1     An updated version of madheads example is below  link to example  HTML   lt  DOCTYPE html gt   lt html data-ng-app  demo  gt     lt head gt       lt script data-require  angular js 1 1 5  data-semver  1 1 5  src  https   ajax googleapis com ajax libs angularjs 1 1 5 angular js  gt  lt  script gt       lt link rel  stylesheet  href  style css    gt       lt script src  script js  gt  lt  script gt     lt  head gt     lt body gt       lt div data-ng-controller  DemoController  gt         lt ul gt           lt li data-ng-repeat  item in items orderBy  toString     gt              item              lt button data-ng-click  removeItem item   gt Remove lt  button gt           lt  li gt         lt  ul gt         lt input data-ng-model  newItem  gt  lt button data-ng-click  addItem newItem   gt Add lt  button gt       lt  div gt     lt  body gt   lt  html gt    JavaScript   use strict    var demo   angular module  demo         function DemoController  scope      scope items          potatoes        tomatoes        flour        sugar        salt           scope addItem   function item        scope items push item        scope newItem   null          scope removeItem   function item       var index    scope items indexOf item        scope items splice index  1

User · Answer

My solution was quite straight forward  app controller  TaskController   function  scope      scope items   tasks        scope addTask   function task            task created   Date now             scope items push task           console log  scope items                scope removeItem   function item               item is the index value which is obtained using  index in ng-repeat          scope items splice item  1

User · Answer

My solution to this  which hasn t caused any performance issues     Extend the array object with a method remove  i m sure you will need it more than just one time      Array prototype remove   function from  to      var rest   this slice  to    from    1    this length     this length   from  lt  0   this length   from   from    return this push apply this  rest         I m using it in all of my projects and credits go to John Resig John Resig s Site   Using forEach and a basic check      scope items forEach function element  index  array             if element name      ted                   scope items remove index                              At the end the  digest will be fired in angularjs and my UI is updated immediately without any recognizable lag

User · Answer

There is no rocket science in deleting items from array  To delete items from any array you need to use splice   scope items splice index  1    Here is an example   HTML   lt  DOCTYPE html gt   lt html data-ng-app  demo  gt     lt head gt       lt script data-require  angular js 1 1 5  data-semver  1 1 5  src  https   ajax googleapis com ajax libs angularjs 1 1 5 angular js  gt  lt  script gt       lt link rel  stylesheet  href  style css    gt       lt script src  script js  gt  lt  script gt     lt  head gt     lt body gt       lt div data-ng-controller  DemoController  gt         lt ul gt           lt li data-ng-repeat  item in items  gt              item              lt button data-ng-click  removeItem  index   gt Remove lt  button gt           lt  li gt         lt  ul gt         lt input data-ng-model  newItem  gt  lt button data-ng-click  addItem newItem   gt Add lt  button gt       lt  div gt     lt  body gt   lt  html gt    JavaScript   use strict    var demo   angular module  demo         function DemoController  scope      scope items          potatoes        tomatoes        flour        sugar        salt           scope addItem   function item        scope items push item        scope newItem   null          scope removeItem   function index        scope items splice index  1

User · Answer

Just a slight expansion on the  angular  solution  I wanted to exclude an item based on it s numeric id  so the   approach doesn t work  The more general solution which should work for   name   ted    or   id  42   is   mycollection    filter  filter   myCollection    id  theId    function  obj  test                                                                  return obj     test

User · Answer

For anyone returning to this question  The correct  Angular Way  to remove items from an array is with  filter  Just inject  filter into your controller and do the following    scope items    filter  filter    scope items   name    ted      You don t need to load any additional libraries or resort to Javascript primitives

User · Answer

You can use plain javascript - Array prototype filter     scope items    scope items filter function item        return item name      ted

User · Answer

Using the indexOf function was not cutting it on my collection of REST resources   I had to create a function that retrieves the array index of a resource sitting in a collection of resources   factory getResourceIndex   function resources  resource      var index   -1    for  var i   0  i  lt  resources length  i          if  resources i  id    resource id          index   i              return index      scope unassignedTeams splice CommonService getResourceIndex  scope unassignedTeams  data   1

User · Answer

My items have unique id s  I am deleting one by filtering the model with angulars  filter service   var myModel     id 12345                             working within the item function doSthWithItem item          myModel    filter  filter   myModel  function value  index        return value id     item id            As id you could also use the   hashKey property of your model items    hashKey  object 91

User · Answer

Because when you do shift   on an array  it changes the length of the array  So the for loop will be messed up  You can loop through from end to front to avoid this problem    Btw  I assume you try to remove the element at the position i rather than the first element of the array    scope items shift    in your code will remove the first element of the array   for var i    scope items length - 1  i  gt   0  i--       if  scope items i  name     ted             scope items splice i 1

User · Answer

If you have any function associated to list  when you make the splice function  the association is deleted too  My solution    scope remove   function         var oldList    scope items       scope items            angular forEach oldList  function x            if    x done   scope items push      DATA OF EACH ITEM USING oldList x                     The list param is named items  The param x done indicate if the item will be deleted  Hope help you  Greetings

User · Answer

Here is filter with  Underscore library might help you  we remove item with name  ted    scope items     filter  scope items  function item        return   item name     ted

[angularjs] How to remove elements/nodes from angular.js array

Examples related to angularjs

Examples related to scope

Examples related to angularjs-ng-repeat