modal - ¿Cómo utilizaría AngularJS ng-repeat con los andamios de Twitter Bootstrap?
modal bootstrap angularjs (5)
Aquí hay una manera:
<div ng-controller="MyCtrl">
<div ng-repeat="project in projects">
<span ng-if="$index % 3 == 0">
<hr />
<div class="row">
<h3 class="span4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
<h3 class="span4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
<h3 class="span4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
</div>
</span>
</div>
</div>
Esta forma también funcionará si, por ejemplo, tiene 7 elementos de datos: en los últimos 3 datos, solo mostrará el elemento 7 y no intentará mostrar el elemento no existente 8 y 9.
EDITAR : Actualizado para usar ng-if y angular 1.2.12
¿Cómo usaría AngularJS ng-repeat para mostrar el siguiente HTML (Twitter Bootstrap Scaffolding)? Esencialmente, cada tercer registro que necesito para cerrar </div> , imprimir una <hr> y luego abrir otra <div class="span4">
<div class="row">
<div class="span4">
<h3>
Project A
</h3>
</div>
<div class="span4">
<h3>
Project B
</h3>
</div>
<div class="span4">
<h3>
Project C
</h3>
</div>
</div>
<hr>
<div class="row">
<div class="span4">
<h3>
Project D
</h3>
</div>
<div class="span4">
<h3>
Lab Title
</h3>
</div>
<div class="span4">
<h3>
Project E
</h3>
</div>
</div>
He creado un violín para demostraciones de código.
http://jsfiddle.net/ADukg/261/
Para mantener la lógica de visualización fuera del controlador y tener una solución más reutilizable, puede crear un filtro personalizado que divida la matriz en grupos de filas:
angular.module(''app'').filter(''group'', function() {
/**
* splits an array into groups of the given size
* e.g. ([1, 2, 3, 4, 5], 2) -> [[1, 2], [3, 4], [5]]
*/
return function(array, groupSize) {
return _.groupBy(array, function(val, index) {
return Math.floor(index / groupSize);
});
};
});
Y en la vista:
<div class="row" ng-repeat="group in projects | group:3">
<div class="span4" ng-repeat="project in group">
{{project}}
</div>
</div>
Para incluir la hora puede usar los puntos de inicio y finalización de ng-repeat:
<div class="row" ng-repeat-start="group in projects | group:3">
<div class="span4" ng-repeat="project in group">
{{project}}
</div>
</div>
<hr ng-repeat-end />
Pasando de la respuesta más fácil . No me gusta la solución original debido a los elementos dom vacíos que produce. Esto es para 3 divs por fila.
<div ng-controller="ModulesCtrl">
<div class="row" ng-repeat="i in fields.range()">
<div class="span4" ng-repeat="field in fields.slice(i,i+3)">
<h2>{{field}}</h2>
</div>
</div>
</div>
En la función FieldsCtrl ($ scope):
$scope.fields.range = function() {
var range = [];
for( var i = 0; i < $scope.fields.length; i = i + 3 )
range.push(i);
return range;
}
Si conoce fields.length, puede en lugar de fields.range () usar [0,3,6,9] etc.
Una forma más elegante es usar el modelo de vista para proporcionar una colección fragmentada y luego dejar que la vista lo maneje como
<div ng-controller="Controller">
Projects <input ng-model="projects"></input>
<hr/>
<div ng-repeat="row in rows">
<div ng-repeat="project in row">
Projects {{project}}
</div>
<hr/>
</div>
</div>
y el coffeescript es bastante simple
# Break up an array into even sized chunks.
chunk = (a,s)->
if a.length == 0
[]
else
( a[i..i+s-1] for i in [0..a.length - 1 ] by s)
@Controller = ($scope)->
$scope.projects = "ABCDEF"
$scope.$watch "projects", ->
$scope.rows = chunk $scope.projects.split(""), 3
angular.bootstrap(document, []);
Al aire libre
Los puntos finales ng-repeat-start y ng-repeat-end parecen una forma conveniente de lograr esto:
Lo que lleva al código simple.
<div ng-controller="MyCtrl">
<div ng-repeat-start="project in projects">
<span>
<div class="row">
<h3 class="span4">{{project}}</h3>
</div
</span>
</div>
<hr ng-repeat-end ng-if="($index + 1) % 3 == 0" />
</div>
Ver este jsfiddle