Menu
I cannot figure out why my simple AngularJS app not working as intended. "Loading..." is supposed to be hidden, and "Done!" should be shown after 1 second.
html:
<div ng-app> <div ng-controller="TestCtrl"> <div class="text-center" ng-show="loading"> <h1>Loading...</h1> </div> <div class="text-center" ng-show="!loading"> <h1>Done!</h1> </div> </div> </div> Javascript:
function TestCtrl($scope) { $scope.loading = true; setTimeout(function () { $scope.loading = false; }, 1000); } 
393
It's slow, and it is especially all turns bad on mobile platforms and when you write something something complex. And it is a fundamental part of the framework. Angular even imposes restrictions on how rich UI you can write.
AngularJS ng-show Directive The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
ng-if can only render data whenever the condition is true. It doesn't have any rendered data until the condition is true. ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.
The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .
You need to tell angular that you updated the var:
function TestCtrl($scope) { $scope.loading = true; setTimeout(function () { $scope.$apply(function(){ $scope.loading = false; }); }, 1000); } or just
function TestCtrl($scope, $timeout) { $scope.loading = true; $timeout(function () { $scope.loading = false; }, 1000); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
