4

我有一个元素列表，我只想在不为空且为空的情况下显示，为此我在 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 指令内部：

广告缩略图指令内容：

<td>
AD - {{ad.name}}
</td>

生成的 HTML 最终会在屏幕上打印 AD - 即使广告列表为空。

结果对象来自

$scope.ads = AdService.query();

调试时显示：

Array[0]
$promise: Object
$resolved: false
length: 0
__proto__: Array[0]

上面的代码可能有什么问题，以防止 angular 呈现 ad-thumbnail 指令？

我在这里发布解决方案以供参考：

在控制器中：

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>
4

2 回答 2

3

这log表明你没有在看你应该看的东西。在查找数据之前，您需要链接$promise查询返回的数据。

   AdService.query().$promise.then(function(data) {
       $scope.ads = data;
       $scope.adsNotEmpty = ($scope.ads && $scope.ads.length);
   });

ng-repeat在 tha 实例正在迭代Queryhance 返回的对象的属性，您会看到空白AD-

于 2014-08-26T03:04:31.690 回答
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>
于 2014-08-26T13:38:17.500 回答