ng-show,ng-hide,ng-if指令

最新推荐文章于 2020-06-26 09:09:50 发布

python基础教程

最新推荐文章于 2020-06-26 09:09:50 发布

阅读量629

点赞数

分类专栏：流行框架node

本文链接：https://blog.csdn.net/stopcpp/article/details/56288810

版权

流行框架node 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>ng-show指令</title>
        <style>
            .tips{
                position: absolute;
                top:0;
                left:0;
                right: 0;
                bottom: 0;
                background-color: rgba(100,100,100,.5);
                font-style: 40px;
                line-height: 100vh;
                text-align: center;
            }
        </style>
    </head>
    <body ng-controller="listenController">
        <div style="height:10000px;">
            aaaaaaaaaaa
        </div>
        <!-- ng-show决定是否显示   ng-hide是否隐藏    ng-if是否存在 -->
        <div class="tips" ng-if="loading">
            loading....
        </div>
        <script src="bower_components/angular/angular.js"></script>
        <script>
            angular.module('myApp', [])
                .controller('listenController', ['$scope', '$timeout',function($scope,$timeout){
                    $scope.loading = true;
                    $timeout(function(){
                        $scope.loading = false;
                        $timeout(function(){
                            $scope.loading = true;
                        },3000);
                    },3000);
                }]);
        </script>
    </body>
</html>