0
我有一個存儲在數組中的對象列表,我有一個按鈕將從該數組中刪除項目並插入到另一個數組中,但我只是知道如何單獨刪除和添加。從數組中刪除對象並插入到其他數組中使用Angular
我的困難在於瞭解何時調用函數,如果需要參數或不需要傳遞或返回哪些值。例如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>
謝謝你,我改成這樣: list1.checkBought = function(itemIndex){ ShoppingListCheckOffService.checkBought(itemIndex); console.log(itemIndex); }而來自list2的ng-repeat錯誤。 – gise
而且我改變了一個工廠的函數,就像service一樣刪除一個try:function ToBuyController(ShoppingListCheckOffService)var list1 = this; list1.items = ShoppingListCheckOffService.getItems(); list1.checkBought = function(itemIndex){ ShoppingListCheckOffService.checkBought(itemIndex); console.log(itemIndex); } } AlreadyBoughtController。$ inject = ['ShoppingListCheckOffService']; 函數AlreadyBoughtController(ShoppingListCheckOffService)var list2 = this; list2.boughtitems = ShoppingListCheckOffService.getBoughtItems(); – gise