How to push objects in AngularJS between ngRepeat arrays

Question

So I m new to AngularJS and I m trying to build a very simple list app  where I can create an ng-repeat item list and then push a selected item into another ng-repeat list  Although my problem seems to be very simple I wasn t able to find a proper solution yet    So here s the simplified markup    lt body ng-app  MyApp  gt    lt div id  MyApp  ng-controller  mainController  gt        lt div id  AddItem  gt            lt h3 gt Add Item lt  h3 gt            lt input value  1  type  number  placeholder  1  ng-model  itemAmount  gt           lt input value    type  text  placeholder  Name of Item  ng-model  itemName  gt           lt br  gt           lt button ng-click  addItem    gt Add to list lt  button gt       lt  div gt       lt  -- begin  LIST OF CHECKED ITEMS -- gt       lt div id  CheckedList  gt            lt h3 gt Checked Items    getTotalCheckedItems     lt  h3 gt             lt h4 gt Checked  lt  h4 gt            lt table gt               lt tr ng-repeat  item in checked  class  item-checked  gt                   lt td gt  lt b gt amount  lt  b gt    item amount   - lt  td gt                   lt td gt  lt b gt name  lt  b gt    item name   - lt  td gt                   lt td gt                       lt i gt this item is checked  lt  i gt                    lt  td gt               lt  tr gt           lt  table gt       lt  div gt       lt  -- end  LIST OF CHECKED ITEMS -- gt       lt  -- begin  LIST OF UNCHECKED ITEMS -- gt       lt div id  UncheckedList  gt            lt h3 gt Unchecked Items    getTotalItems     lt  h3 gt             lt h4 gt Unchecked  lt  h4 gt            lt table gt               lt tr ng-repeat  item in items  class  item-unchecked  gt                   lt td gt  lt b gt amount  lt  b gt    item amount   - lt  td gt                   lt td gt  lt b gt name  lt  b gt    item name   - lt  td gt                   lt td gt                       lt button ng-click  toggleChecked  index   gt check item lt  button gt                   lt  td gt               lt  tr gt           lt  table gt       lt  div gt       lt  -- end  LIST OF ITEMS -- gt     lt  div gt   lt  body gt    And here goes my AngularJS Script   var app   angular module  MyApp         app controller  mainController    function   scope        Item List Arrays  scope items        scope checked           Add a Item to the list  scope addItem   function            scope items push           amount   scope itemAmount          name   scope itemName                 Clear input fields after push      scope itemAmount            scope itemName               Add Item to Checked List and delete from Unchecked List  scope toggleChecked   function  item  index         scope checked push item        scope items splice index  1          Get Total Items  scope getTotalItems   function          return  scope items length         Get Total Checked Items  scope getTotalCheckedItems   function          return  scope checked length           So when I click the button  my toggleChecked   function triggers and it actually pushes something into my checked list  However  it seems to be just an empty object  The function can t get the actual item that I want to push   What am I doing wrong here   NOTE  Checking items via click on a button is intended  I don t want to use checkboxes in this case   You can see the working model here  http   jsfiddle net 7n8NR 1   Cheers  Norman

User · Answer

Try this one also      x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt body gt  x000D   x000D     lt p gt Click the button to join two arrays  lt  p gt  x000D   x000D     lt button onclick  myFunction    gt Try it lt  button gt  x000D   x000D     lt p id  demo  gt  lt  p gt  x000D     lt p id  demo1  gt  lt  p gt  x000D     lt script gt  x000D      function myFunction     x000D        var hege      x000D          1   Cecilie   x000D          2   Lone  x000D            x000D        var stale      x000D          1   Emil   x000D          2   Tobias  x000D            x000D        var hege   hege concat stale   x000D        document getElementById  demo1   innerHTML   hege  x000D        document getElementById  demo   innerHTML   stale  x000D        x000D     lt  script gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You d be much better off using the same array with both lists  and creating angular filters to achieve your goal   http   docs angularjs org guide dev guide templates filters creating filters  Rough  untested code follows   appModule filter  checked   function         return function input  checked            if  input return input          var output              for  i in input               var item   input i               if item checked    checked output push item                     return output             and the view  i added an  uncheck  button too        lt div id  AddItem  gt        lt h3 gt Add Item lt  h3 gt        lt input value  1  type  number  placeholder  1  ng-model  itemAmount  gt       lt input value    type  text  placeholder  Name of Item  ng-model  itemName  gt       lt br  gt       lt button ng-click  addItem    gt Add to list lt  button gt   lt  div gt   lt  -- begin  LIST OF CHECKED ITEMS -- gt   lt div id  CheckedList  gt        lt h3 gt Checked Items    getTotalCheckedItems     lt  h3 gt         lt h4 gt Checked  lt  h4 gt        lt table gt           lt tr ng-repeat  item in items   checked true  class  item-checked  gt               lt td gt  lt b gt amount  lt  b gt    item amount   - lt  td gt               lt td gt  lt b gt name  lt  b gt    item name   - lt  td gt               lt td gt                   lt i gt this item is checked  lt  i gt                  lt button ng-click  item checked   false  gt uncheck item lt  button gt                lt  td gt           lt  tr gt       lt  table gt   lt  div gt   lt  -- end  LIST OF CHECKED ITEMS -- gt   lt  -- begin  LIST OF UNCHECKED ITEMS -- gt   lt div id  UncheckedList  gt        lt h3 gt Unchecked Items    getTotalItems     lt  h3 gt         lt h4 gt Unchecked  lt  h4 gt        lt table gt           lt tr ng-repeat  item in items   checked false  class  item-unchecked  gt               lt td gt  lt b gt amount  lt  b gt    item amount   - lt  td gt               lt td gt  lt b gt name  lt  b gt    item name   - lt  td gt               lt td gt                   lt button ng-click  item checked   true  gt check item lt  button gt               lt  td gt           lt  tr gt       lt  table gt   lt  div gt   lt  -- end  LIST OF ITEMS -- gt       Then you dont need the toggle methods etc in your controller

User · Answer

change your method to    scope toggleChecked   function  index         scope checked push  scope items index         scope items splice index  1        Working Demo

[arrays] How to push objects in AngularJS between ngRepeat arrays

Examples related to arrays

Examples related to angularjs

Examples related to controller

Examples related to ng-repeat