CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
OmriManor
OmriManor

Reputation: 255

Bootstrap different col-* with ng-repeat

I've got a movie reviews example application built in angular + bootstrap, I'm trying to build a "grid" of 3 images for medium and up screens, the problem is that when I want to have only 2 images per row for xs screens.

I'm using ng-repeat and populating the imgs inside the cols.

is there a nice way to do this? (I'm aware that the $index + N may be out of bounds, and that there is code duplication here. just want to find a good solution for rearranging the bootstrap grid for different screen sizes on dynamic data)

<div ng-repeat="movie in movies" ng-if="$index % 3 == 0" class="row slide-left">
    <div class="col-md-4">
        <img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
    </div>
    <div class="col-md-4">
        <img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
    </div>
    <div class="col-md-4">
        <img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
    </div>
</div>

Upvotes: 3

Views: 1012

Answers (2)

Walfrat
Walfrat

Reputation: 5353

<div ng-repeat="movie in movies" >
  <div class="col-md-4 col-xs-6">
    <img ng-src='http://image.tmdb.org/t/p/w185/{{movie.poster_path}}' ng-click="chooseMovie(movie)">
  </div>
</div>

This should do the trick.

I removed the row but i think even with it will works unless you use the clearfix class.

The grid will automatically go on the next line after "12" columns.

So a size of 4 for medium screen means 3 per line, 6 for xs screen ->2/line :)

Upvotes: 2

Gianluca Paris
Gianluca Paris

Reputation: 1429

You can detect bootstrap columns by using the following function:

function findBootstrapEnvironment() {
var envs = ["ExtraSmall", "Small", "Medium", "Large"];
var envValues = ["xs", "sm", "md", "lg"];

var $el = $('<div>');
$el.appendTo($('body'));

for (var i = envValues.length - 1; i >= 0; i--) {
    var envVal = envValues[i];

    $el.addClass('hidden-'+envVal);
    if ($el.is(':hidden')) {
        $el.remove();
        return envs[i]
    }
};

}

The setting a value to the scope based on the return

if(findBootstrapEnvironment()==="Medium"|(findBootstrapEnvironment()==="Large"|){
$scope.size="Medium"
}else{
$scope.size="Small"
}

And then with ng-if you can manage the div to be with 3 or 2 photos like this

Three photos if medium

    <div ng-repeat="movie in movies" ng-if="size==medium" class="row slide-left">
    <div class="col-md-4">
        <img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
    </div>
    <div class="col-md-4">
        <img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
    </div>
    <div class="col-md-4">
        <img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
    </div>
</div>

Two photos if small

    <div ng-repeat="movie in movies" ng-if="size==small" class="row slide-left">
    <div class="col-sm-4">
        <img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
    </div>
    <div class="col-sm-4">
        <img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
    </div>
</div>

Upvotes: 0

Related Questions