我使用的是angular.min.js 1.8.2课程AngularJS单页应用程序.
我创建了一个itemAdder来添加用户的购物清单,项目将显示在showList中。一旦你买了项目,你可以点击购买按钮,把购买列表放到购买列表中。
如果所有的东西都买了,应该有一个消息说'一切都买了',这应该是由ng-if控制,它现在不工作。
有人能看出问题所在吗?
谢谢你。
超文本:
<!-- 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 loadingThis is the console.log after all items in bought list正如我们所看到的,done变为true,但是div where ng-if="itemAdder.checkAllBought()"
不工作。您也可以在这里查看包含源代码的页面:github page
1条答案
按热度按时间lymnna711#
正确的指令
*ngIf