问题描述
我正在做一个非常简单的应用程序：
我想通过ajax调用加载数组，然后显示它。 在加载期间，我需要动画gif。
<!DOCTYPE html>
<html ng-app="thresholdApp">
<head lang="fr">
<script src="/lib/angular.min.js"></script>
<script src="/bin/js/thresholds/angular/controller/controller.js"></script>
<script src="/bin/js/thresholds/angular/service/webservice.js"></script>
</head>
<body ng-controller="thresholdCtrl as ctrl" class="text-center">
<div class="row">
<div class="column small-6 small-centered">
<table>
<tr ng-show="loading">
<td colspan="3" class="text-center">
<img src="/res/img/greyLoadingWheel.gif" alt="loading"/>
{{loading}}
</td>
</tr>
<tr ng-repeat="t in thresholds">
<td>{{t.brand.name}}</td>
<td class="text-center">{{t.stock}}</td>
<td class="text-center">{{t.threshold}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
使用该控制器：
thresholdApp = angular.module("thresholdApp", []);
thresholdApp.controller("thresholdCtrl",function($scope, webService) {
$scope.loading = true;
webService.post("stock/threshold/check", {}, function(result) {
$scope.thresholds = result.stockThresholds;
$scope.loading = false;
});
});
它工作正常，表中按预期充满了ajax响应，但是带有ng-show指令的tr无效。 奇怪的是，另一方面，{{loading}}得到了很好的更新，并被false取代。
ng-show似乎无能为力，并且始终显示tr。
任何想法 ？
编辑
通过ng-if可以更改ng-show 。
但是有人知道为什么ng-show在这里不起作用吗？
1楼
Kangcor
1
已采纳
2015-07-30 12:00:20
如评论中所述，错误似乎与属性display: none设置ng-show/hide指令时， <tr> display: none错误。
使用ng-if指令可将其有效地从DOM中删除，并按预期工作。
由于某些原因，angular不会设置他的CSS类。
如角度文档中所述，此修复程序将添加：
<link rel="stylesheet" href="/lib/angular-csp.css"/>