CODEWITHSUNDEEP
javascriptangularjs
Emrys Myrooin
Emrys Myrooin

Reputation: 2231

Simple ng-show directive not working

I'm making a very simple application:

I want to load an array via ajax call, then display it. During the loading time, I want an animated gif.

<!DOCTYPE html>
<html ng-app="thresholdApp">
<head lang="fr">
    <script src="/lib/angular.min.js"></script>
    <script src="/bin/js/thresholds/angular/controller/controller.js"></script>
    <script src="/bin/js/thresholds/angular/service/webservice.js"></script>
</head>
<body ng-controller="thresholdCtrl as ctrl" class="text-center">
    <div class="row">
        <div class="column small-6 small-centered">
            <table>
                    <tr ng-show="loading">
                        <td colspan="3" class="text-center">
                            <img src="/res/img/greyLoadingWheel.gif" alt="loading"/>
                            {{loading}}
                        </td>
                    </tr>
                    <tr ng-repeat="t in thresholds">
                        <td>{{t.brand.name}}</td>
                        <td class="text-center">{{t.stock}}</td>
                        <td class="text-center">{{t.threshold}}</td>
                    </tr>
            </table>
        </div>
    </div>
</body>
</html>

With that controller :

thresholdApp = angular.module("thresholdApp", []);

thresholdApp.controller("thresholdCtrl",function($scope, webService) {

    $scope.loading = true;
    webService.post("stock/threshold/check", {}, function(result) {
        $scope.thresholds = result.stockThresholds;
        $scope.loading = false;
    });
});

It works well, the table is filled with the ajax response as expected but the tr with the ng-show directive don't work. The weird thing is that in the other hand, {{loading}} is well updated and is replace by false.

ng-show seems to do nothing and the tr is always displayed.

Any idea ?

EDIT

Changing ng-show by ng-if works. But does anyone knows why ng-show doesn't work here ?

Upvotes: 0

Views: 248

Answers (1)

Kangcor
Kangcor

Reputation: 1189

As said in the comments, seems like the error is related to the attribute display: none in the <tr> when the ng-show/hide directive is set.

Using the ng-if directive removes it effectively from the DOM and works as expected.

For some reasons, angular don't set his css classes.

The fix, as said in the angular documentation, is to add:

<link rel="stylesheet" href="/lib/angular-csp.css"/>

Upvotes: 1

Related Questions