One of the features in my application is a search page that loads data based on a user's query. The results, which appear in groups of 10, contain two fields that I need to toggle between dynamically: "imgs" and "smallImgs".
To clarify, if a result's smallImgs.length == true, then I want to display those images. If there are no small images available, then I want to display the regular imgs.
I am familiar with using ng-hide and ng-show in AngularJS, and I could use a basic true/false statement in the template to show or hide the imgs/smallImgs. However, it seems that even when using ng-hide, the data still gets fetched (including the image downloads).
The only solution I have considered so far is handling this logic in my controller when making the API call to fetch the data:
$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;
}
}
However, I have not been able to make this work yet. Is this the most effective approach? Is there a more Angular-oriented way to handle this in the view?