我有一个我想要显示的元素列表,只有当它不为空且为空时,为此我在ng-repeat块之前放置了一个ng-if:
<tbody ng-if="adsNotEmpty">
<!-- Start: list_row -->
<tr ng-repeat="ad in ads">
<td>{{$index + 1}}</td>
<ad-thumbnail ad="ad"/>
</tr>
<!-- End: list_row -->
</tbody>
为此,我有一个控制器代码,用于评估广告列表并设置adsNotEmpty var:
controllers.controller('AdCtrl', ['$scope', 'AdService',
function($scope, AdService) {
$scope.ads = AdService.query();
$scope.adsNotEmpty = ($scope.ads && $scope.ads.length > 0);
}]);
我有一个RESTful网络服务,当前返回HTTP 200 OK状态并返回空响应,即使adsNotEmpty结果为false,代码也会进入ad-thumbnail指令:
ad-thumbnail指令内容:
<td>
AD - {{ad.name}}
</td>
生成的HTML最终会在屏幕上打印AD - 即使广告列表为空。
来自
的结果对象 $scope.ads = AdService.query();
显示在调试上:
Array[0]
$promise: Object
$resolved: false
length: 0
__proto__: Array[0]
上面的代码有什么不对,以防止角度渲染广告缩略图指令?
我在这里发布解决方案供参考:
控制器中的:
controllers.controller('AdCtrl', ['$scope', 'AdService',
function($scope, AdService) {
AdService.query(function(data) {
$scope.ads = data;
$scope.adsNotEmpty = ($scope.ads.length > 0);
});
并在页面中:
<tbody>
<!-- Start: list_row -->
<tr ng-repeat="ad in ads">
<td ng-if="adsNotEmpty">{{$index + 1}}</td>
<ad-thumbnail ad="ad" ng-if="adsNotEmpty"/>
</tr>
<!-- End: list_row -->
</tbody>
答案 0 :(得分:3)
log
向您显示您没有看到您应该做的事情。在查找数据之前,您需要链接查询返回的$promise
。
AdService.query().$promise.then(function(data) {
$scope.ads = data;
$scope.adsNotEmpty = ($scope.ads && $scope.ads.length);
});
tha实例的 ng-repeat
正在迭代Query
返回的对象的属性,你看到空白AD-
答案 1 :(得分:2)
试试这个:
<tbody ng-if="ads.length > 0">
<!-- Start: list_row -->
<tr ng-repeat="ad in ads">
<td>{{$index + 1}}</td>
<ad-thumbnail ad="ad"/>
</tr>
<!-- End: list_row -->
</tbody>