I'm using angular.min.js 1.8.2 for Coursera AngularJS Single Page Application.
I created an itemAdder to add a shopping list by users, the items will show in showList. Once you bought the items, you can click bought button to put to buy list to bought list.
If all things were bought, there should be a message that says 'Everything is bought', which should be controlled by ng-if, and it is not working now.
Could anyone see the problem?
Thank you.
HTML:
<!-- some code here -->
<!-- To Buy List -->
<div class="col-md-6" ng-controller='ShoppingListAddController as itemAdder'>
<h2>To Buy:</h2>
<input type="text" ng-model="itemAdder.itemName" placeholder="item name">
<input type="text" ng-model="itemAdder.itemQuantity" placeholder="quantity">
<button ng-click="itemAdder.addItem();" class="btn btn-default">Add Item To Shopping List</button>
<ul ng-controller='ShoppingListShowController as showList'>
<li ng-repeat="item in showList.items">
{{ item.quantity }} of {{ item.name }}
<button ng-click="showList.removeItem($index);" class="btn btn-default">Remove Item</button>
<button ng-click="showList.addBoughtItem($index);" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Bought</button>
</li>
</ul>
<!-- This is the ng-if not working -->
<div class="emptyMessage" ng-if="itemAdder.checkAllBought()">Everything is Bought!</div>
</div>
<!-- code after -->
app.js:
(function () {
'use strict';
angular.module('ShoppingListCheckOff', [])
.controller('ShoppingListAddController', ShoppingListAddController)
.controller('ShoppingListShowController', ShoppingListShowController)
.controller('ShoppingListBoughtController', ShoppingListBoughtController)
.service('ShoppingListCheckOffService', ShoppingListCheckOffService);
ShoppingListAddController.$inject = ['ShoppingListCheckOffService'];
function ShoppingListAddController(ShoppingListCheckOffService) {
var itemAdder = this;
itemAdder.itemName = "";
itemAdder.itemQuantity = "";
itemAdder.addItem = function () {
ShoppingListCheckOffService.addItem(itemAdder.itemName, itemAdder.itemQuantity);
};
itemAdder.checkAllBought = function(){
ShoppingListCheckOffService.checkAllBought();
}
};
ShoppingListShowController.$inject = ['ShoppingListCheckOffService'];
function ShoppingListShowController(ShoppingListCheckOffService) {
var showList = this;
showList.items = ShoppingListCheckOffService.getItems();
showList.boughtItem = ShoppingListCheckOffService.getBoughtItems();
showList.removeItem = function (itemIndex) {
ShoppingListCheckOffService.removeItem(itemIndex);
};
showList.addBoughtItem = function (itemIndex) {
ShoppingListCheckOffService.addBoughtItem(itemIndex);
};
};
ShoppingListBoughtController.$inject = ['ShoppingListCheckOffService'];
function ShoppingListBoughtController(ShoppingListCheckOffService) {
var boughtList = this;
boughtList.boughtItems = ShoppingListCheckOffService.getBoughtItems();
};
function ShoppingListCheckOffService() {
var service = this;
// List of shopping items
var items = [];
var count = 0;
var boughtItems = [];
service.addItem = function (itemName, quantity) {
var item = {
name: itemName,
quantity: quantity
};
items.push(item);
count++;
console.log("addItem",count);
};
service.removeItem = function (itemIndex) {
items.splice(itemIndex, 1);
count--;
console.log("removeItem",count);
};
service.getItems = function () {
return items;
};
service.addBoughtItem = function (itemIndex) {
var boughtItem = {
name: items[itemIndex].name,
quantity: items[itemIndex].quantity
};
boughtItems.push(boughtItem);
items.splice(itemIndex, 1);
count--;
console.log("addBought",count);
};
service.checkAllBought = function(){
var done = false;
console.log("bought items",boughtItems.length);
console.log("items",items.length);
console.log("done before if",done);
if ( items.length == 0 && boughtItems.length >0){
done = true;
};
console.log("bought items after if",boughtItems.length);
console.log("items after if",items.length);
console.log("done after if",done);
return done;
};
service.getBoughtItems = function () {
return boughtItems;
};
};
}) ();
This is the debug image when initial loading
This is the console.log after all items in bought list
As we can see, done becomes true but the div where ng-if="itemAdder.checkAllBought()" is not working.
You can also check the page with sources here: github page
