Angular.js utilizzando bootstrap e la creazione dinamica di file

Question

Sto cercando di capire come creare dinamicamente bootstrap div fila con una classe di row-fluid con angular.js utilizzando la direttiva ng-repeat.

Ecco l'angolare:

<div ng-repeat="task in tasks" class="row-fluid"> 
    <div class="span6 well">{{task.name}}</div> 
</div> 

Questo fa non lavoro però. Il bootstrap html vorrei generare è:

http://jsfiddle.net/YKkXA/2/

Fondamentalmente ho bisogno di fare mod 2 dell'indice all'interno della ng-repeat, e se il suo 0, chiudere il </div> e creare un nuovo <div class="row-fluid">. Com'è possibile?

Answer 1

L'idea è di filtrare i tuoi articoli per raggrupparli e fare un secondo ngRepeat per iterare su sotto-voci.

In primo luogo, aggiungere che il filtro al modulo:

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

Nel vostro controler (perché se si filtra direttamente nel tuo modello, allora si avrà un $digest loop):

function TaskCtrl() { 
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2); 
} 

E in il tuo .html:

<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid"> 
    <div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div> 
</div> 

Answer 2

Off Topic: utilizzo di bootstrap puoi semplicemente posizionare div di classe = "span6 bene" in una fila di bigass che si impilano bene. (Avrai anche un layout reattivo). Scusate se era solo un esempio del comportamento che il bootstrap non può gestire. Anthony e Remigio hanno ragione; devi creare un veicolo modulo aggiuntivo che genererà le immersioni immerse nei tuoi tag ng-ripetuti.

Answer 3

Come un miglioramento alla risposta che Anthony ha dato, direi che potresti risparmiare un sacco di problemi usando il metodo slice invece di attraversare tutte quelle condizioni.

Prova definire il filtro come segue:

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

Dopo di che si può chiamare il filtro del controller come Anthony ha sottolineato nella sua risposta:

function Controller ($scope) { 
    $scope.itemsGrouped = $filter('group')(itemsArray, 5); 
}