angularjs ng-如果不是空的ng-repeat

时间:2014-08-26 03:00:21

标签: javascript angularjs angularjs-directive angularjs-ng-repeat angular-ng-if

我有一个我想要显示的元素列表,只有当它不为空且为空时,为此我在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>

2 个答案:

答案 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>