0
配列を共有するサービスを作成する必要がありますが、ビューの配列の1つを表示する方法がわかりません。私は最初の配列を表示するために管理し、しかし、私は「AlreadyBought」配列に「ToBuy」アレイからアイテムを移動する方法を見つけ出すカントHTMLでコントローラ間でデータを共有する方法は？
(function() {
\t 'use strict';
\t angular.module('ShoppingListCheckOff', [])
\t .controller('ToBuyController', ToBuyController)
\t .controller('AlreadyBoughtController', AlreadyBoughtController)
\t .service('ShoppingListCheckOffService', ShoppingListCheckOffService);
\t ToBuyController.$inject = ['ShoppingListCheckOffService'];
\t function ToBuyController(ShoppingListCheckOffService) {
\t \t var ToBuyCtrl = this;
\t \t ToBuyCtrl.buyItems = ShoppingListCheckOffService.getBuyItems();
\t \t ToBuyCtrl.CheckItem = function() {
\t \t \t ShoppingListCheckOffService.CheckItem(ToBuyCtrl.itemName, ToBuyCtrl.quantity, ToBuyCtrl.index);
\t \t };
\t \t ToBuyCtrl.setBougthItems = function() {
\t \t \t ShoppingListCheckOffService.setBougthItems(ToBuyCtrl.itemName, ToBuyCtrl.quantity);
\t \t }
\t };
\t AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
\t function AlreadyBoughtController(ShoppingListCheckOffService) {
\t \t var AlreadyBoughtCtrl = this;
\t \t AlreadyBoughtCtrl.bougthItems = ShoppingListCheckOffService.getBougthItems();
\t };
\t function ShoppingListCheckOffService() {
\t \t var service = this;
\t \t var buyItems = [
\t \t \t {name: 'Coockies', quantity: '10 bags'},
\t \t \t {name: 'Cereal', quantity: '4 boxes'},
\t \t \t {name: 'Orange juice', quantity: '4 botles'},
\t \t \t {name: 'Soda drinks', quantity: '2 botles'},
\t \t \t {name: 'Cerael bars', quantity: '10 bags'},
\t \t \t {name: 'Milk', quantity: '4 botles'}
\t \t ];
\t \t var bougthItems = [];
\t \t service.CheckItem = function (itemName, quantity, index) {
\t \t \t var item = {
\t \t \t \t name: itemName,
\t \t \t \t quantity: quantity
\t \t \t };
\t \t \t buyItems.splice(index, 1);
\t \t \t bougthItems.push(item);
\t \t };
\t \t service.getBuyItems = function() {
\t \t \t return buyItems;
\t \t };
\t \t service.setBougthItems = function (itemName, quantity) {
\t \t \t var item = {
\t \t \t \t name: itemName,
\t \t \t \t quantity: quantity
\t \t \t };
\t \t \t bougthItems.push(item);
\t \t };
\t \t service.getBougthItems = function() {
\t \t \t return bougthItems;
\t \t };
\t };
})();
In the app.js i have created an "ShoppingListCheckService" service that shares the array of "ToBuy" and "AlreadyBought".<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ShoppingListCheckOff">
<div class="container">
<h1>Shopping List Check Off</h1>
<div class="row">
<!-- To Buy List -->
<div class="col-md-6" ng-controller="ToBuyController as ToBuyCtrl">
<h2>To Buy:</h2>
<ul>
<li ng-repeat="buyItem in ToBuyCtrl.buyItems">{{buyItem.quantity}} - {{buyItem.name}}<button class="btn btn-default" ng-click="ToBuyCtrl.CheckItem(buyItem.quantity, buyItem.name, $index) && ToBuyCtrl.setBougthItems(ToBuyCtrl.itemName, ToBuyCtrl.quantity);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
</ul>
<div class="emptyMessage" ng-if="ToBuyCtrl.buyItems.length === 0">Everything is bought!</div>
</div>
<!-- Already Bought List -->
<div class="col-md-6" ng-controller="AlreadyBoughtController as AlreadyBoughtCtrl">
<h2>Already Bought:</h2>
<ul>
<li ng-repeat="boughtItem in AlreadyBoughtCtrl.boughtItems">{{boughtItem.quantity}} - {{boughtItem.name}}</li>
</ul>
<div class="emptyMessage" ng-if="AlreadyBoughtCtrl.boughtItems.lenght === 0">Nothing bought yet.</div>
</div>
</div>
</div>
</body>。