从数组中删除对象并使用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);
}