CODEWITHSUNDEEP
javascriptangularjsscopeangularjs-scope
EssaidiM
EssaidiM

Reputation: 8342

Update $scope doesn't affect the view

I am trying to update the $scope.loading from within the promise callback. I tried using $scope.$apply but I can't get it to work.

loading is a variable used in my view in order to show a loading bar if the data is not yet loaded, else show the data.

This is my controller:

angular.module('ecommerce')
    .controller('ProductsCtrl', function ($scope, ProductsService) {
        $scope.loading = true;
        $scope.error = false;
        ProductsService.getProducts().then(function (data) {
            $scope.loading = false;
            $scope.products = data;
        }, function (response) {
            $scope.products = null;
        });
});

This is my view :

<div ng-show="{{loading}}">Loading... please </div>
<div ng-hide="{{loading}}">

But i keep seeing the loading message, even when data is successfully loaded.

Upvotes: 1

Views: 55

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222582

Just put without experession {{}}. According to the ng-show documentation

<div ng-show="loading">Loading... please </div>
<div ng-hide="loading">

Here is the Demo

Upvotes: 2

Seth Flowers
Seth Flowers

Reputation: 9190

Get rid of the {{ and }}. Your ng-show and ng-hide directives should look like this:

<div ng-show="loading">Loading... please </div>
<div ng-hide="loading">

See the docs for ng-show and ng-hide.

Upvotes: 3

Related Questions