ng顯示工程，但快速顯示兩個div

因此，使用Angular.js控制器從數據庫中獲取結果集，數據是無關緊要的。當結果返回false（沒有找到行）時，正確的div顯示「empty！」。ng顯示工程，但快速顯示兩個div

當結果恢復正確時，div爲空！顯示一秒鐘，然後「結果！」顯示。這種行爲讓我想起了jQuery .hide()，我把我的代碼放在下面，但我仍然無法弄清楚爲什麼會發生這種行爲？

HTML：

<h1 class="page-header"> 
    Products 
    <small> 
     <i class="fa fa-angle-double-right text-primary"></i> add 
    </small> 
</h1> 

<div class="row"> 
    <div class="col-sm-12 col-md-12 col-lg-12"> 
     <div ng-show="categoriesFound">results!</div> 
     <div ng-show="!categoriesFound">empty!</div> 
    </div> 
</div>

角控制器：

mbpApp.controller('ProductsCtrl', function(httpService, $scope) { 
    httpService.productCategoriesFindAll().then(function(d) { 
    $scope.data = d; 

     if(d.status) { 
      $scope.categoriesFound = true; 
     } else { 
      $scope.categoriesFound = false; 
     } 
    }); 
});

來源

2014-09-05 Naterade

我猜你正在使用Twitter Bootstrap的'.row'和'.col-'標記。你只需要'.col-sm-12'，另外兩個是多餘的。 – 2014-09-05 04:23:23

你是對的。老習慣很難死我猜..... – Naterade 2014-09-05 04:42:08

那是因爲你設置$scope.categoriesFound之前，模板已被處理。角度表達式原諒未定義但仍報告爲未定義，因此results! div的ng-show爲假，並且empty! div的ng-show爲！false，這是正確的。

您可以在開始時通過執行$scope.categoriesFound = true;來解決此問題，但在您甚至獲得您的回覆之前，將顯示results!。

相反，您可以添加另一個變量（如categoriesLoading），在發出請求時將其設置爲true，並在模板中添加條件以顯示某種加載指示符。當請求完成並被處理時，將其設置爲false，然後填充變量categoriesFound變量

來源

2014-09-05 03:36:16

你帶領我走向正確的方向。我用ng-show =「show」將這些div包裝在div中，將其設置爲false，並在條件語句運行後將其稱爲true。它的工作原理很難看。時間讓它優雅。感謝您的幫助和解釋。 – Naterade 2014-09-05 04:06:42

ng顯示工程，但快速顯示兩個div

回答

相關問題