0
<!--After loading no error from inspection but the move method not responding-->
<!--The HTML--->
<!doctype html>
<html ng-app='ShoppingListCheckOff'>
<html lang="en">
<head>
<title>Shopping List Check Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.emptyMessage {
font-weight: bold;
color: red;
font-size: 1.2em;
}
li {
margin-bottom: 7px;
font-size: 1.2em;
}
li > button {
margin-left: 6px;
}
button > span {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>Shopping List Check Off</h1>
<div class="row">
<!--i think all is ok with this div as everything loaded as i wanted it-->
<!--the ng-hide worked also-->
<!--To Buy List -->
<div class="col-md-6" ng-controller='ToBuyController as itemAdder'>
<h2>To Buy:</h2>
<ul>
<li ng-repeat="item in itemAdder.shoppingList2">Name: {{item.name}} , Quantity: {{item.quantity}}
<button class="btn btn-default" ng-click="itemAdder.move()"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
</ul>
<div ng-hide="itemAdder.shoppingList2.length" class="emptyMessage">Everything is bought!</div>
</div>
<!--I want to move the displayed items to this div on click of the bought button-->
<!--ng-hide i think it worked-->
<!-- Already Bought List -->
<div class="col-md-6" ng-controller='AlreadyBoughtController as boughtItem'>
<h2>Already Bought:</h2>
<ul>
<li>Bought <span ng-bind="boughtItem.boughtList.length"></span> 10 cookies</li>
<li ng-repeat="item in boughtItem.boughtList">Name: {{item.name}} , Quantity: {{item.quantity}}</li>
</ul>
<div ng-hide="boughtItem.boughtList.length" class="emptyMessage">Nothing bought yet.</div>
</div>
</div>
</div>
</body>
</html>
<!--Script-->
(function() {
'use strict';
angular.module('ShoppingListCheckOff', [])
.controller('ToBuyController', ToBuyController)
.controller('AlreadyBoughtController', AlreadyBoughtController)
.service('ShoppingListService', ShoppingListService);
<!--This part populated with the buttons ready to be clicked-->
ToBuyController.$inject = ['ShoppingListService'];
function ToBuyController(ShoppingListService) {
var itemAdder = this;
itemAdder.shoppingList2 = ShoppingListService.shoppingList2;
}
on click of the button i was expecting the item clicked to move to here
AlreadyBoughtController.$inject = ['ShoppingListService'];
function AlreadyBoughtController(ShoppingListService) {
var boughtItem= this;
boughtItem.boughtList= ShoppingListService.bought;
}
私はここで何もしませんでしたか？しかし、リスト2には値が設定されていますエラーなしで空のオブジェクトを新しいリストに移動するコード
function ShoppingListService（）{ var service = this;
service.shoppingList2 = [
{
name: "Milk",
quantity: "2"
},
{
name: "Donuts",
quantity: "200"
},
{
name: "Cookies",
quantity: "300"
},
{
name: "Musli",
quantity: "10"
},
{
name: "Chocolate",
quantity: "5"
}
];
この部分はクリックされていますが、空のオブジェクトが戻されています。私は、オブジェクトをクリックでここに移動したいが、何かが完了していないと私はあなたがあなたのリスト内のオブジェクト名の定義のための引用符を残し
service.bought = [];
service.remove = function(itemIndex){
service.bought.push(service.shoppingList2.splice(itemIndex,1));
}
service.getItems = function(){
return service.bought;
};
}
})();
これは違いはありませんいずれか service.shoppingList2 = [ { "名前"： "ミルク"、 "量"： "2" } ]。 –