条件符合ngShow和ngHide

Question

我正在尝试在加载数据时显示加载图标,然后在数据准备好时显示数据.问题是我几秒钟,我可以看到加载图标和数据......

这是我的代码

$scope.items[y].content.push({ text: '', loading: true });

API.getContent(id, x, y, function (response, x, y) {

    $scope.items[y].content[x].loading = false;
    $scope.items[y].content[x].text = response.data.text;
});

我的看法 :

<i ng-show="item.loading" class="fa fa-spinner fa-pulse fa-2x"></i>
<p ng-hide="item.loading" class="portal-subtitle" ng-bind-html="item.text"></p>

我的内容是异步加载的.我得到结果时,加载值设置为false,因此此时图标应该是不可见的......但事实并非如此!(如图所示).

不知道怎么解决这个问题？

编辑:

我显示了我的"item.loading"的值.看起来当值从true变为false时,会显示文本,但图标仍然在这里几秒钟......这有帮助吗？

谢谢你的帮助

Answer 1

如果您使用 ng-animate，请将其添加到您的 css 中：

.ng-hide.ng-hide-animate{display: none !important; }

动画正在等待 ng-hide 启动之前完成。

上面的CSS将在ng-hide和ng-hide-animate重合后立即隐藏元素。