[英]angularjs ng-if not empty for ng-repeat
I have a list of elements I want to display only if not null and empty, and for that I placed a ng-if before a ng-repeat block: 我有一个我想要显示的元素列表,如果不是null和空,为此我在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>
for that I have a controller code which evaluates the ads list and sets the adsNotEmpty var: 为此,我有一个控制器代码,用于评估广告列表并设置adsNotEmpty var:
controllers.controller('AdCtrl', ['$scope', 'AdService',
function($scope, AdService) {
$scope.ads = AdService.query();
$scope.adsNotEmpty = ($scope.ads && $scope.ads.length > 0);
}]);
I have a RESTful webservice which currently returns HTTP 200 OK status with an empty response, even though the adsNotEmpty results to false the code enters inside of ad-thumbnail directive: 我有一个RESTful webservice,当前返回HTTP 200 OK状态并返回空响应,即使adsNotEmpty结果为false,代码也会进入ad-thumbnail指令:
ad-thumbnail directive content: ad-thumbnail指令内容:
<td>
AD - {{ad.name}}
</td>
the resulting HTML ends up printing AD - on the screen even though the ads list is empty. 即使广告列表为空,生成的HTML也会在屏幕上打印AD。
the resulting object from 来自的结果对象
$scope.ads = AdService.query();
shows on debug: 在调试时显示:
Array[0]
$promise: Object
$resolved: false
length: 0
__proto__: Array[0]
What could be wrong with the code above to prevent angular from rendering the ad-thumbnail directive ? 上面的代码有什么不对,以防止角度呈现ad-thumbnail指令?
I am posting the solution here for reference: 我在这里发布解决方案以供参考:
in controller: 在控制器中:
controllers.controller('AdCtrl', ['$scope', 'AdService',
function($scope, AdService) {
AdService.query(function(data) {
$scope.ads = data;
$scope.adsNotEmpty = ($scope.ads.length > 0);
});
and in page: 并在页面中:
<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>
The log
shows you that you are not looking at what you should. log
显示您没有看到应该是什么。 You need to chain through the $promise
returned by the Query, before looking for data. 在查找数据之前,您需要链接查询返回的$promise
。
AdService.query().$promise.then(function(data) {
$scope.ads = data;
$scope.adsNotEmpty = ($scope.ads && $scope.ads.length);
});
ng-repeat
at tha instance is iterating through the properties of the object returned by Query
hance you see blank AD-
在tha实例的ng-repeat
迭代Query
返回的对象的属性,你看到空白的AD-
Try this: 试试这个:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.