Question

我有一个电影评论示例应用程序内置角度+ bootstrap，我试图建立一个＆＃34;网格＆＃34;对于中型和高级屏幕的3个图像，问题是当我想为xs屏幕每行只有2个图像时。

我正在使用ng-repeat并在cols中填充imgs。

有一个很好的方法吗？（我知道$ index + N可能超出界限，并且这里有代码重复。只是想找到一个很好的解决方案来重新排列动态数据上不同屏幕尺寸的引导网格）

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

Answer 1

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

这应该可以解决问题。

我删除了行但我认为即使使用它也行不通，除非你使用clearfix类。

网格将在＆＃34; 12＆＃34;之后自动进入下一行。列。

因此，中等屏幕的大小为4表示每行3个，xs屏幕为6个 - > 2个/行：）

Answer 2

您可以使用以下函数检测引导列：

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]
    }
};

}

根据回报

为范围设置值

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

然后使用ng-if你可以将div管理为3或2张这样的照片

三张照片，如果中等

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

两张照片，如果小

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

使用ng-repeat引导不同的col- *

2 个答案: