0

在我的应用程序中，我有一个搜索页面，它根据用户的查询加载数据。每个结果（以 10 个波的形式出现）都有两个我想要动态切换的字段：“imgs”和“smallImgs”。

简而言之，如果结果是，smallImgs.length == true那么我想加载这些图像。如果它没有长度，那么我想加载它的imgs.

我知道ng-hideand ng-show，我可以在模板中做一个简单的真/假语句来显示或隐藏imgs/ smallImgs。但据我所知，即使我ng-hide启用了一个元素，它仍然会加载该数据（因此会将图像下载到客户端）。

我想到实现这一点的唯一方法是在我的控制器中，在获取$resource我的数据的调用中：

 $scope.itemSearch.get({query:$routeParams.query, page:$routeParams.page}, function(data){
    $scope.posts = data.posts;
    for(var i = 0; i<$scope.posts.length; i++){
      $scope.posts[i].imgs = testImgs($scope.posts[i]);
    }
  });

var testImgs = function(data){
  if (data.smallImgs.length){
    return data.smallImgs;
  } else{
    return data.imgs;
  }
}

不幸的是我还没有得到这个工作。这是实现这一目标的最佳方式吗？在视图中是否有 Angular 的方法来处理这个问题？

4

2 回答 2

1

我要做的是为此向您的控制器添加一个方法：

$scope.getImages = function () {
    // add the logic to get the correct array here
};

然后在视图中使用它，例如

<div ng-repeat="image in getImages()" />

这是一个示例 jsfiddle。

于 2013-07-27T14:58:22.507 回答
0

$scope.itemSearch.get({query:$routeParams.query, page:$routeParams.page}) - 如果这返回承诺你可以这样做

$scope.getImages = $scope.itemSearch.get({query:$routeParams.query, page:$routeParams.page});

<div ng-repeat="image in getImages" />
于 2013-07-27T15:34:59.933 回答