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

回答

相关问题