Remove objects from array and insert into another array with Angular

Question

I have a list of objects that I store in an array and I have a button that will remove the items from that array and insert in another array, but I just know how to remove and add separately.

My difficult is to understand when to call a function, if need arguments or not, which values to pass or return. For example the add function has 2 arguments to insert the object values, but I don't know how to call that function after click and remove, the array it's not updating, get the initial value before remove the first list.

First I need to understand how it works remove an index and get this index and insert into another list.

I don't know how it works factory or services, just know that it's how I 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 I insert or call add function after remove or get the removed item and insert in another array?

What it's working the function add and 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, but I dont know how to display in the view and don't add the first item. The function is in the 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 to 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 to 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">
    <!-- To Buy List -->
    <div id="list1" ng-controller='ToBuyController as 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 is bought!</div>
      </div>
      <!-- Already Bought List -->
      <div class="col-md-6">
       <!-- LIST #2 -->
       <div id="list2" ng-controller='AlreadyBoughtController as 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>

Answer 1

I've created a fiddle: https://jsfiddle.net/ctd36gda/

The function you'll probably be interested in is 'moveElement':

function moveElement(index, fromArray, toArray) {
  toArray.push(fromArray[index]);
  fromArray.splice(index, 1);
}