Question

因此，使用Angular.js控制器我从数据库中获取结果集，数据无关紧要。当结果返回false（没有找到行）时，正确的div显示“空！”。

当结果返回true时，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;
        }
  });
});

Answer 1

那是因为在设置$scope.categoriesFound之前，必须处理模板。 Angular表达式是未定义的宽容但仍然将其报告为未定义，因此results! div的ng-show为false，而empty! div的ng-show为！false，这是真的。

您可以在开始时执行$scope.categoriesFound = true;来解决此问题，但在您收到回复之前会显示results!。

相反，你可以做的是添加另一个变量（类似categoriesLoading），在发出请求时将其设置为true，并在模板中添加条件以显示某种加载指示符。请求完成并处理后，将其设置为false，然后填充categoriesFound变量

ng-show有效，但很快显示两个div

1 个答案: