CODEWITHSUNDEEP
javascripthtmlangularjsangular-ng-if
Luca Ciancanelli
Luca Ciancanelli

Reputation: 57

Angular 1 ng-if not displaying div

I've been writing a code that uses ng-if to display a div with a message if an array is empty([]). The ng-if isn't displaying the div even though I have console.log the array and it shows up empty.

I am still new to angularjs so I am not sure if I am using the ng-if directive correctly. Here is my code, anything helps, thank you!

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>

Upvotes: 0

Views: 108

Answers (1)

L. Figueredo
L. Figueredo

Reputation: 278

You should use ng-if (for arrays) in this way:

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

This will show the message when the list is empty.

If you do this: 

buy.shoppingList === []

You are comparing you buy.shoppingList array with a new empty array, then it will return false.

Upvotes: 1

Related Questions