Question

我正在尝试加载图像图标（设置时间加载特定时间为30秒），同时从数据库加载数据但是我遇到了一些问题，因为我想为加载图标设置计时器（即加载图标显示为30第二）使用angularjs。我是如何通过ng-show和ng-hide完成此功能的，但我无法在Icon中附加时间。我的代码是

     editApp.controller('MyCtrl', ['$scope', '$http', 'ngDialog','$timeout' ,function ($scope,$http, ngDialog, $timeout) {
             GetList();
             $scope.dataloaded = false;

在ajax调用之后我将$scope.dataloaded设置为true

    function GetList() {
                 debugger;

                 $http({
                     method: 'GET',
                     url: '/Home/GetProductList'
                 }).
                 success(function (data) {

                     if (data != null || data != 'undefined') {
                         $scope.productlist = data;
                         $scope.dataloaded = true;
                     }
                 })
                 .error(function (error) {
                     $scope.status = 'Unable to retrieve product' + error.message;
                 });


             }

我的html代码是

<div ng-hide="dataloaded" style="margin:auto" align="center"> </div>

和

<div ng-show="dataloaded" style="margin:auto" align="center"> </div>

Answer 1

让我们显示div 30秒：

<button ng-click='show()'>Show</button>
<div ng-show='showDiv'/>

在控制器中：

$scope.show = function() {
    $scope.showDiv = true;
    $timeout(function() {
        $scope.showDiv = false;
    }, 30000);
}

使用angularjs在特定时间加载数据时显示加载图标

1 个答案: