twitter-bootstrap Angular.js 使用引导程序并动态创建行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14748449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js using bootstrap and dynamically creating rows
提问by Justin
I am trying to figure out how to dynamically create bootstraprow divs with a class of row-fluidwith angular.jsusing the ng-repeatdirective.
我想弄清楚如何使用指令动态创建bootstrap具有类row-fluidwith 的行 div 。angular.jsng-repeat
Here is the angular:
这是角度：
<div ng-repeat="task in tasks" class="row-fluid">
<div class="span6 well">{{task.name}}</div>
</div>
This does notwork though. The bootstraphtml I wish to generate is:
这并没有工作，虽然。bootstrap我希望生成的html 是：
Basically I need to do mod 2 of the index inside of the ng-repeat, and if its 0, close out the </div>and create a new <div class="row-fluid">. How is this possible?
基本上我需要在 ng-repeat 里面做索引的 mod 2，如果它是 0，关闭</div>并创建一个新的<div class="row-fluid">. 这怎么可能？
回答by Anthony O.
The idea is to filter your items in order to group them, and make a second ngRepeatto iterate on sub-items.
这个想法是过滤你的项目以对它们进行分组，然后ngRepeat再迭代子项目。
First, add that filter to your module :
首先，将该过滤器添加到您的模块中：
module.filter('groupBy', function() {
return function(items, groupedBy) {
if (items) {
var finalItems = [],
thisGroup;
for (var i = 0; i < items.length; i++) {
if (!thisGroup) {
thisGroup = [];
}
thisGroup.push(items[i]);
if (((i+1) % groupedBy) === 0) {
finalItems.push(thisGroup);
thisGroup = null;
}
}
if (thisGroup) {
finalItems.push(thisGroup);
}
return finalItems;
}
};
});
In your controler (because if you filter directly in your template, then you will have a $digest loop):
在您的控制器中（因为如果您直接在模板中过滤，那么您将有一个$digest 循环）：
function TaskCtrl() {
$scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2);
}
And in your .html:
而在你的.html：
<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
<div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>
回答by alex952
As an improvement to the answer Anthony gave, I would say that you could save yourself a lot of trouble using the slice method instead of going through all those conditions.
作为对 Anthony 给出的答案的改进，我会说您可以使用 slice 方法而不是经历所有这些条件来为自己省去很多麻烦。
Try defining your filter as it follows:
尝试按如下方式定义过滤器：
module.filter('group', function() {
return function(items, groupItems) {
if (items) {
var newArray = [];
for (var i = 0; i < items.length; i+=groupItems) {
if (i + groupItems > items.length) {
newArray.push(items.slice(i));
} else {
newArray.push(items.slice(i, i + groupItems));
}
}
return newArray;
}
};
});
After that you can call the filter on your controller as Anthony pointed out in his response:
之后，您可以像 Anthony 在他的回复中指出的那样调用控制器上的过滤器：
function Controller ($scope) {
$scope.itemsGrouped = $filter('group')(itemsArray, 5);
}
回答by Skiper Skiprovic
Off Topic: using bootstrap you can just place divs of class="span6 well" into one bigass row as they will stack nicely. (You will get an responsive layout too). Sorry if it was just an example of the behaviour that bootstrap can't handle. Anthony and Remigio are right; you have to create an extra module vehicle that will generate divs immersed into your ng-repeated tags.
题外话：使用引导程序，您可以将 class="span6 well" 的 div 放入一个 bigass 行中，因为它们会很好地堆叠。（您也将获得响应式布局）。对不起，如果这只是引导程序无法处理的行为的一个例子。安东尼和雷米吉奥是对的；您必须创建一个额外的模块车辆，它将生成沉浸在您的 ng-repeated 标签中的 div。
