jnt*_*jns 13 angularjs angularjs-ng-repeat twitter-bootstrap-3
使用Bootstrap和AngularJS,有没有办法ng-repeat为每个设定数量的元素水平地添加一个新行？
我一直在玩ng-class这个来实现这个目标Fiddle,但问题是我无法在最初的行div中得到浮动的div ...有任何想法,我不是在想某事或者最好是用指令完成？
这是我的代码(上面的小提琴链接中的实例):
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="num in numbers"
ng-class="{'row': ($index)%2==0, 'col-md-6': ($index)%2!=0}">
<div ng-class="{'col-md-6': ($index)%2==0}">
{{num}}
</div>
</div>
</div>
</body>
var myApp = angular.module('myApp', [])
.controller('MyCtrl', function ($scope) {
$scope.numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
});
.row {
clear: both;
width: 100%;
border: 1px solid red;
}
.col-md-6 {
width: 50%;
float: left;
border: 1px solid blue;
}
小智 9
如果您正在使用Bootstrap 3和AngularJS,您可以声明一个新的过滤器,它将返回一个子数组切片数组,然后执行两次ng-repeat.
看起来像这样:
<div class="row" ng-repeat="row in filtered = (arr | splitArrayFilter:3)">
<div class="col-md-4" ng-repeat="n in row">
<h3>{{n}}</h3>
</div>
</div>
app.filter('splitArrayFilter', function() {
return function(arr, lengthofsublist) {
if (!angular.isUndefined(arr) && arr.length > 0) {
var arrayToReturn = [];
var subArray=[];
var pushed=true;
for (var i=0; i<arr.length; i++){
if ((i+1)%lengthofsublist==0) {
subArray.push(arr[i]);
arrayToReturn.push(subArray);
subArray=[];
pushed=true;
} else {
subArray.push(arr[i]);
pushed=false;
}
}
if (!pushed)
arrayToReturn.push(subArray);
console.log(JSON.stringify(arrayToReturn));
return arrayToReturn;
}
}
});
你可以在Plunker上找到它:http://plnkr.co/edit/rdyjRtZhzHjWiWDJ8FKJ?p=preview 由于某种原因,plunker中的视图不支持bootstrap 3列,但如果你在嵌入式视图或浏览器中打开它,你可以看到它有效.
你做的很聪明ng-class.我从来没有想过%2在那里的表达中使用.
但是为了将来参考,有一种更容易实现的方法:ng-class-even和ng-class-odd.它与你正在做的事情做同样的事情,但只是更清洁:
<div ng-repeat="num in numbers" ng-class-even="'md-col-6'" ng-class-odd="'row'">
{{num}}
</div>
但这并不能解决您的问题.如果我理解正确,您需要一行,该行中有两列.我能想到的最简单的方法是拆分数组.戴上重复div,然后有2个span内div.我认为你最初遇到的一个问题是,你正在重复一个问题div,并试图将该block元素视为一个inline
调节器
myApp.controller('MyCtrl', function ($scope) {
$scope.evens = ["2","4","6","8","10","12","14"];
$scope.odds = ["1","3","5","7","9","11","13"];
});
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="odd in odds" class="row">
<span class="span3">{{odd}}</span>
<span class="span2">{{evens[$index]}}</span>
</div>
</div>
是,你正在使用的版本1.1.5,这也可能让你到一个新的指令:ng-if!您还可以使用ng-switch一些条件逻辑显示.
你没有在你的小提琴中包含bootstrap,由于某种原因我无法让jsFiddle显示bootstrap.所以我创建了一些有点像bootstraps的临时CSS类class="span"
| 归档时间： |
|
| 查看次数： |
35663 次 |
| 最近记录： |