配列からオブジェクトを取り除いて角を付けて別の配列に挿入

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

これは動作しますが、私はビューで表示すると、最初の項目を追加しない方法を知ってはいけません。

{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ある機能はboughtitems配列に追加しています'：

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