Question

我必须创建一个共享数组的服务，但我无法弄清楚如何在视图中显示其中一个数组。

(function () {
	'use strict';

	angular.module('ShoppingListCheckOff', [])
	.controller('ToBuyController', ToBuyController)
	.controller('AlreadyBoughtController', AlreadyBoughtController)
	.service('ShoppingListCheckOffService', ShoppingListCheckOffService);

	ToBuyController.$inject = ['ShoppingListCheckOffService'];
	function ToBuyController(ShoppingListCheckOffService) {
		var ToBuyCtrl = this;

		ToBuyCtrl.buyItems = ShoppingListCheckOffService.getBuyItems();

		ToBuyCtrl.CheckItem = function () {
			ShoppingListCheckOffService.CheckItem(ToBuyCtrl.itemName, ToBuyCtrl.quantity, ToBuyCtrl.index);
		};

		ToBuyCtrl.setBougthItems = function () {
			ShoppingListCheckOffService.setBougthItems(ToBuyCtrl.itemName, ToBuyCtrl.quantity);
		}
	};

	AlreadyBoughtController.$inject = ['ShoppingListCheckOffService'];
	function AlreadyBoughtController(ShoppingListCheckOffService) {
		var AlreadyBoughtCtrl = this;

		AlreadyBoughtCtrl.bougthItems = ShoppingListCheckOffService.getBougthItems();
	};

	function ShoppingListCheckOffService() {
		var service = this;

		var buyItems = [
			{name: 'Coockies', quantity: '10 bags'},
			{name: 'Cereal', quantity: '4 boxes'},
			{name: 'Orange juice', quantity: '4 botles'},
			{name: 'Soda drinks', quantity: '2 botles'},
			{name: 'Cerael bars', quantity: '10 bags'},
			{name: 'Milk', quantity: '4 botles'}
		];

		var bougthItems = [];

		service.CheckItem = function (itemName, quantity, index) {
			var item = {
				name: itemName,
				quantity: quantity
			};
			buyItems.splice(index, 1);
			bougthItems.push(item);
		};

		service.getBuyItems = function () {
			return buyItems;
		};

		service.setBougthItems = function (itemName, quantity) {
			var item = {
				name: itemName,
				quantity: quantity
			};
			bougthItems.push(item);
		};

		service.getBougthItems = function () {
			return bougthItems;
		};
	};
})();

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>

在HTML中我设法显示第一个数组，但我无法弄清楚如何将项目从“ToBuy”数组移动到“AlreadyBought”数组。

Answer 1

您应该提供一种服务方法，以某种方式识别ToBuy数组中的元素，将其删除，然后将其添加到AlreadyBought数组中。例如，假设我知道要移动的元素的索引，我可以这样做：

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

JSFiddle

Answer 2

您的代码无效的原因是由于两个原因。

您没有在ToBuyCtrl.CheckItem（）方法中捕获itemName和数量。（很容易找到）
你的ng-repeat中的拼写错误（在AlreadyBoughtCtrl.boug ht 项目中的buyingItem）你将项目分配给boug th 项目。（花了很多时间才找到）

此外，您不需要ToBuyCtrl.setBougthItems（）方法，因为您要将数据推送到服务中的buyingItems数组。如果您打算将其删除，请务必将其从标记中删除。

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

JSFiddle

如何在控制器之间共享数据？

2 个答案: