CODEWITHSUNDEEP
angularjs
alessandro ferrucci
alessandro ferrucci

Reputation: 1291

AngularJS condition in ng-show not working

I have a simple app with a controller and a div that should be conditionally shown according to a variable flag.

here is the HTML:

<div class="col-lg-12" ng-controller="PrimaryTeamReportCtrl">
    <p class="lead">{{model.reportTitle}} - {{model.reportDate}}</p>
    <p>{{loading}}</p>
</div>
<div class="splash" ng-show="loading">
    <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
<script type="text/javascript" src="TeamReportApp.js"/>

Here is the controller:

var app = angular.module('TeamReportApp', []);
app.controller('PrimaryTeamReportCtrl', function($scope, $http) {
    $scope.model={};
    $scope.loading=false;
    $scope.loadPrimaryTeamReport = function() {
        $scope.loading=true;
        $http.get('/primary_team_report_ws').success(function(data) {
            $scope.model = data;
            console.log("Data: "+ JSON.stringify($scope.model));
            $scope.loading=false;
        }).error(function() {
            alert("LoadPrimaryTeamReport AJAX call failed");
            $scope.loading=false;
        });
    };
    $scope.loadPrimaryTeamReport();
});

I'm displaying the loading variable {{loading}} on the HTML for debugging purposes and it's set correctly. However the div never shows up as it should.

I have tested just putting ng-show="true" to make sure the DIV CSS was correct, and when I do that, the DIV shows up correctly. Can anyone see what I'm missing here?

Thanks! Alessandro Ferrucci

Upvotes: 0

Views: 516

Answers (1)

Dalorzo
Dalorzo

Reputation: 20014

ng-show is outside of the controller html element

<div class="col-lg-12" ng-controller="PrimaryTeamReportCtrl">
    <p class="lead">{{model.reportTitle}} - {{model.reportDate}}</p>
    <p>{{loading}}</p>
</div> <!-- here -->
<div class="splash" ng-show="loading">
    <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>

try this instead:

<div class="col-lg-12" ng-controller="PrimaryTeamReportCtrl">
        <p class="lead">{{model.reportTitle}} - {{model.reportDate}}</p>
        <p>{{loading}}</p>

    <div class="splash" ng-show="loading">
        <i class="fa fa-spinner fa-spin fa-5x"></i>
    </div>
</div>

Upvotes: 1

Related Questions