0

私のアプリには、ユーザーのクエリに基づいてデータを読み込む検索ページがあります。各結果 (10 の波で来る) には、「imgs」と「smallImgs」の間で動的に切り替えたい 2 つのフィールドがあります。

つまり、結果が得られれば、smallImgs.length == trueそれらの画像をロードしたいと思います。長さがない場合は、ロードしたいと思いますimgs。

私はng-hideandを認識しており、テンプレートで単純な true/false ステートメントを実行して、 /ng-showを表示または非表示にすることができます。しかし、私が知る限り、要素を有効にしても、そのデータに読み込まれます (したがって、画像がクライアントにダウンロードされます)。imgssmallImgsng-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 に答える