从数组中删除对象并插入到其他数组中使用Angular

Question

我有一个存储在数组中的对象列表，我有一个按钮将从该数组中删除项目并插入到另一个数组中，但我只是知道如何单独删除和添加。

我的困难在于了解何时调用函数，如果需要参数或不需要传递或返回哪些值。例如add函数有2个参数来插入对象值，但我不知道如何在单击和移除后调用该函数，它不更新的数组，在移除第一个列表之前获取初始值。

首先我需要了解它是如何工作的删除索引并获取此索引并插入到另一个列表中。

我不知道它是如何工作的工厂或服务，只知道这是我怎么能控制器之间的访问功能

阵列

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.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); 
    }; 

这工作，但我不知道如何在视图中显示和不添加的第一个项目。该功能是添加在boughtitems阵列：

{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

我创建了一个小提琴：https://jsfiddle.net/ctd36gda/

你可能会感兴趣的功能是“moveElement '：

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