为什么这个简单的 AngularJS ng-show 不起作用? [英] Why is this simple AngularJS ng-show not working?

问题描述

我不明白为什么我的简单 AngularJS 应用程序没有按预期工作.正在加载..."应该是隐藏的，完成！"应在 1 秒后显示.

html:

<div ng-controller="TestCtrl"><div class="text-center" ng-show="loading"><h1>正在加载...</h1>
<div class="text-center" ng-show="!loading"><h1>完成！</h1>

Javascript:

function TestCtrl($scope) {$scope.loading = true;设置超时(函数(){$scope.loading = false;}, 1000);}

解决方案

你需要告诉 angular 你更新了 var:

function TestCtrl($scope) {$scope.loading = true;设置超时(函数(){$scope.$apply(function(){$scope.loading = false;});}, 1000);}

或者只是

function TestCtrl($scope, $timeout) {$scope.loading = true;$超时(函数(){$scope.loading = false;}, 1000);}

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);
}

解决方案

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);
}

这篇关于为什么这个简单的 AngularJS ng-show 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！