当条件为真时,AngularJS ng-if不工作

ni65a41a  于 2022-12-26  发布在  Angular
关注(0)|答案(1)|浏览(166)

我使用的是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

lymnna71

lymnna711#

正确的指令*ngIf

<div  class="emptyMessage" *ngIf="itemAdder.checkAllBought()">Everything is Bought!</div>

相关问题