Angular 1 ng-如果不显示 div

Question

我一直在编写代码，如果数组为空 ([])，则使用 ng-if 显示带有消息的 div。 ng-if 没有显示 div 即使我有 console.log 数组并且它显示为空。

我还是 angularjs 的新手，所以我不确定我是否正确使用了 ng-if 指令。这是我的代码，有什么帮助，谢谢！

js:

(function () {
    'use strict';

    var data = [];
    var shoppingList = [
        {
            name: "Donuts",
            quantity: "10"
        },
        {
            name: "Cookies",
            quantity: "10"
        },
        {
            name: "Drinks",
            quantity: "10"
        },
        {
            name: "Shrimp",
            quantity: "10"
        },
        {
            name: "Ice Cream tub",
            quantity: "100"
        }
    ];
    console.log(data);
    angular.module('shoppingListCheckOffApp', [])
        .controller('toBuyListController', toBuyListController)
        .controller('boughtListController', boughtListController)
        .service('shoppingListService', shoppingListService);

    toBuyListController.$inject = ['shoppingListService'];
    function toBuyListController(shoppingListService) {
        var buy = this;
        buy.shoppingList = shoppingList;
        buy.shoppingListBought = function (itemIndex) {
            shoppingListService.dataTransfer(buy.shoppingList[itemIndex].name, buy.shoppingList[itemIndex].quantity);
            shoppingListService.remove(itemIndex);
        };
    }
    boughtListController.inject = ['shoppingListService'];
    function boughtListController(shoppingListService) {
        var bought = this;
        bought.data = shoppingListService.getData();
        console.log(bought.data);
    }

    function shoppingListService() {
        var service = this;
        service.dataTransfer = function (itemName, quantity) {
            var item = {
                name: itemName,
                quantity: quantity
            };
            data.push(item);
        }
        service.remove = function (itemIndex) {
            shoppingList.splice(itemIndex, 1);
        };
        service.getData = function () {
            return data;
        };

    };
})();

html:

<!doctype html>
<html ng-app="shoppingListCheckOffApp">

<head>
    <title>Shopping List Check Off</title>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <div>
        <h1>Shopping List Check Off</h1>

        <div>

            <!-- To Buy List -->
            <div ng-controller="toBuyListController as buy">
                <h2>To Buy:</h2>
                <ul>
                    <li ng-repeat="item in buy.shoppingList">Buy {{item.quantity}} {{item.name}}(s)<button
                            ng-click="buy.shoppingListBought($index);" ng-click="myVar = true"><span></span>
                            Bought</button></li>
                </ul>
                <div ng-if="buy.shoppingList === []">Everything is bought!</div>
            </div>

            <!-- Already Bought List -->
            <div ng-controller="boughtListController as bought">
                <h2>Already Bought:</h2>
                <ul>
                    <li ng-repeat="item in bought.data">Bought {{item.quantity}} {{item.name}}(s)</li>
                </ul>
                <div ng-if="bought.data === []">Nothing bought yet.</div>
            </div>
        </div>
    </div>

</body>

</html>

Answer 1

您应该以这种方式使用 ng-if（用于数组）：

<div ng-if="!bought.data.length">Nothing bought yet.</div>

这将在列表为空时显示消息。

如果你这样做：

buy.shoppingList === []

您正在将 buy.shoppingList 数组与一个新的空数组进行比较，那么它将 return 为假。

Angular 1 ng-如果不显示 div

Angular 1 ng-if not displaying div

html

javascript

angularjs

angular-ng-if