javascript - Remove objects from array and insert into another array with Angular -

i have list of objects store in array , have button remove items array , insert in array, know how remove , add separately.

my difficult understand when call function, if need arguments or not, values pass or return. example add function has 2 arguments insert object values, don't know how call function after click , remove, array it's not updating, initial value before remove first list.

first need understand how works remove index , index , insert list.

i don't know how works factory or services, know it's how can access functions between controllers

arrays

var items = [];    var boughtitems = [];   service.displayitem = function(itemname, itemquantity) {    items.push({name: "apple", quantity: 2}, {name: "strawberry", quantity: 10},               {name: "grape", quantity: 5}, {name: "orange", quantity: 6}, {name: "lemon", quantity: 4});  } 

how can insert or call add function after remove or removed item , insert in array?

what it's working function add , remove:

service.additem = function (itemname, quantity) {     if ((maxitems === undefined) ||         (maxitems !== undefined) && (items.length < maxitems)) {       var item = {         name: itemname,         quantity: quantity       };       items.push(item);     }     else {       throw new error("max items (" + maxitems + ") reached.");     }   };    service.removeitem = function (itemindex) {     items.splice(itemindex, 1);   }; 

this works, dont know how display in view , don't add first item. function in add in boughtitems array:

{name: "strawberry", quantity: 10},               {name: "grape", quantity: 5}, {name: "orange", quantity: 6}    service.addlist = function (itemindex) {     items.splice(itemindex, 1);     //console.log(boughtitems);     boughtitems.splice(0,0,items[itemindex]); return boughtitems;     console.log(boughtitems);  }; 

(function () {  'use strict';    angular.module('shoppinglistcheckoff', [])  .controller('tobuycontroller', tobuycontroller)  .controller('alreadyboughtcontroller', alreadyboughtcontroller)  .service('shoppinglistcheckoffservice', shoppinglistcheckoffservice);    // list #1 - controller  tobuycontroller.$inject = ['shoppinglistcheckoffservice'];  function tobuycontroller(shoppinglistcheckoffservice) {    var list1 = this;      // use factory create new shopping list service    var shoppinglist = shoppinglistcheckoffservice();      list1.items = shoppinglist.getitems();      list1.itemname = "";    list1.itemquantity = "";      shoppinglist.displayitem(list1.itemname, list1.itemquantity);      list1.addlist = function (itemindex) {      shoppinglist.addlist(itemindex);    };  }      // list #2 - controller  alreadyboughtcontroller.$inject = ['shoppinglistcheckoffservice'];  function alreadyboughtcontroller(shoppinglistcheckoffservice) {    var list2 = this;      // use factory create new shopping list service    var shoppinglist = shoppinglistcheckoffservice(5);       list2.boughtitems = shoppinglist.getitems2();       list2.itemname = "";     list2.itemquantity = "";       shoppinglist.displayitem2(list2.itemname, list2.itemquantity);     //list1.addlist = function (itemindex) {      // shoppinglist.addlist(itemindex);    // };       list2.addlist = function (itemindex) {       shoppinglist.addlist(itemindex, 1);    };    //    // list2.removeitem = function (itemindex) {    //   shoppinglist.removeitem(itemindex);    // };  }      // if not specified, maxitems assumed unlimited  function shoppinglistservice(maxitems) {    var service = this;      // list of shopping items    var items = [];      var boughtitems = [];     service.displayitem = function(itemname, itemquantity) {     items.push({name: "apple", quantity: 2}, {name: "strawberry", quantity: 10},                {name: "grape", quantity: 5}, {name: "orange", quantity: 6}, {name: "lemon", quantity: 4});   }     service.displayitem2 = function(itemname, itemquantity) {    //    boughtitems.push(items);    if ((maxitems === undefined) ||       (maxitems !== undefined) && (boughtitems.length < maxitems)) {        var item = {         name: itemname,         quantity: itemquantity        };       boughtitems.push(items);       return boughtitems;      }      else {        throw new error("max items (" + maxitems + ") reached.");      }     console.log(boughtitems);   }      service.removelist = function (itemindex) {        items.splice(itemindex, 1);    };         service.addlist = function (itemindex) {      items.splice(itemindex, 1);      //console.log(boughtitems);      boughtitems.splice(0,0,items[itemindex]);  return boughtitems;      console.log(boughtitems);   };      service.getitems = function () {      return items;    };      service.getitems2 = function () {          return boughtitems;    };    }      function shoppinglistcheckoffservice() {    var factory = function (maxitems) {      return new shoppinglistservice(maxitems);    };      return factory;  }    })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <!doctype html>  <html lang="en" ng-app='shoppinglistcheckoff'>    <head>      <title>shopping list check off</title>      <meta name="viewport" content="width=device-width, initial-scale=1">      <link rel="stylesheet" href="styles/bootstrap.min.css">      <link rel="stylesheet" href="styles/styles.css">    </head>  <body>    <div class="container">    <h1>shopping list check off</h1>    <!-- list #1 - unlimited items -->      <h3>shopping list #1</h3>      <input type="text" ng-model="list1.itemname" placeholder="item name">      <input type="text" ng-model="list1.itemquantity" placeholder="quantity">      <button ng-click="list1.additem();">add item</button>      <div class="error">error: {{list1.errormessage}}</div>    <div class="row">      <!-- buy list -->      <div id="list1" ng-controller='tobuycontroller list1'>        <div class="col-md-6">         <h2>to buy:</h2>         <ul>           <li ng-repeat="item in list1.items"> buy {{ item.quantity }} {{ item.name }}s              <button ng-click="list1.addlist($index);" class="btn btn-default">                <span class="glyphicon glyphicon-ok"></span> bought</button></li>           </li>         </ul>         <div class="emptymessage">everything bought!</div>        </div>        <!-- bought list -->        <div class="col-md-6">         <!-- list #2 -->         <div id="list2" ng-controller='alreadyboughtcontroller list2'>           <h2>already bought:</h2>         <ul>           <li ng-repeat="item in list2.items"> buy {{ item.quantity }} {{ item.name }}s</li>           <button ng-click="list2.removelist($index);">remove item</button>         </ul>         <div class="emptymessage">nothing bought yet.</div>        </div>        </div>    </div>    </div>  </div>    <script src="angular.min.js"></script>    <script src="app.js"></script>  </body>  </html>

i've created fiddle: https://jsfiddle.net/ctd36gda/

the function you'll interested in 'moveelement':

function moveelement(index, fromarray, toarray) {   toarray.push(fromarray[index]);   fromarray.splice(index, 1); }