前端學習(1563):ng-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ng-app指令</title>
    <style>
        .red {
            color: red;
        }
        
        .green {
            color: green;
        }
    </style>
</head>
<!-- 需要angular的代碼必須包裹在ng-app的代碼中 -->
<!-- ng-bind遇到html的時候會轉義 爲了安全 -->

<body ng-app="myApp1" ng-controller="ListController">
    <div>aaaa</div>
    <div class="tips" ng-if="loading">
        Loading
    </div>
    <script src="./js/Angular.js"></script>
    <!-- 隔行換色 -->
    <script>
        var myApp1 = angular.module('myApp1', []);
        myApp1.controller('ListController', ['$scope', '$timeout', function($scope,
            $timeout) {
            $scope.loading = true;
            $timeout(function() {
                $scope.loading = false;
                $timeout(function() {
                    $scope.loading = true;
                }, 3000)
            }, 3000)
        }])
    </script>
</body>

</html>

運行結果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章