Wie teile ich Daten zwischen Controllern?

Ich muss einen Dienst erstellen, der ein Array freigibt, aber ich kann nicht herausfinden, wie eines der Arrays in der Ansicht angezeigt wird.Wie teile ich Daten zwischen Controllern?

(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>

Im HTML-i verwalten das erste Array zu zeigen, aber ich kann nicht herausfinden, wie ein Element aus dem auf die "AlreadyBought" Array "tobuy" Array zu bewegen.

Quelle

2016-12-03 alejandrohtadinom

Der Grund Code funktioniert nicht, weil aus zwei Gründen.

Sie wurden itemName und Menge in ToBuyCtrl.CheckItem() -Methode nicht zu kontrollieren. (War leicht zu finden)
Schreibfehler in Ihrem ng-Repeat (boughtItem in AlreadyBoughtCtrl.boug ht Artikel) wo Sie den Artikel boug angaben th Items. (Nahm viel Zeit zu finden)

Auch Sie nicht ToBuyCtrl.setBougthItems benötigen() -Methode, da Sie Daten zu boughtItems Array in Ihrem Dienst schieben. Wenn Sie vorhaben, es zu entfernen, müssen Sie es auch aus dem Markup entfernen.

ToBuyCtrl.CheckItem = function (itemName, quantity, index) { 
      ShoppingListCheckOffService.CheckItem(itemName, quantity, index); 
     };

JSFiddle

Quelle

2016-12-04 07:08:40

Sie sollten eine Service-Methode für das bereitstellen, die das Element im ToBuy-Array in gewisser Weise identifiziert, es entfernt und es dann dem Array "AlreadyBought" hinzufügt. Zum Beispiel, sagen, dass ich den Index des Elements kennen zu bewegen, ich etwas tun könnte:

service.moveToBought = function(index) { 
    service.bought.push(service.buy[index]); 
    service.buy.splice(index, 1); 
}

JSFiddle

Quelle

2016-12-04 00:03:35 ChiefTwoPencils

Wie teile ich Daten zwischen Controllern?

Antwort

Verwandte Themen