Verwenden von ng-repeat mit Tabellenzeilen

Ich versuche zum einfügen von Daten aus einem Modell in ein template aber ich möchte hinzufügen, um eine neue Zeile in der Tabelle, nachdem alle 7 Wiederholungen. Mit strign-basierte Vorlagen, die ich tun könnte es ganz einfach mit der iteration index-und modulo-aber ich kann nicht ganz herausfinden, wie Sie dies tun, indem Sie eckige DOM Vorlagen.

Hier die HTML-Ausgabe:

<div ng-controller="MyCtrl">
  <table cellspacing="0" cellpadding="0">
   <colgroup span="7"></colgroup>

   <tbody>
     <tr class="days">
       <th scope="col" title="Monday">Mon</th>
       <th scope="col" title="Tuesday">Tue</th>
       <th scope="col" title="Wednesday">Wed</th>
       <th scope="col" title="Thursday">Thu</th>
       <th scope="col" title="Friday">Fri</th>
       <th scope="col" title="Saturday">Sat</th>
       <th scope="col" title="Sunday">Sun</th>
     </tr>
     <tr>
         <td ng-repeat="date in dates">
             {{ date }}
             <!-- After seven iterations a new `<tr>` should be aded -->
        </td>
     </tr>
 </tbody>
 </table>
</div>

Sowie javascript, mit dem Sie so etwas wie:

myApp = this.angular.module('myApp', []);

var monthDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1516, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

myApp.controller('MyCtrl', function($scope) {
  return $scope.dates = monthDays;
});

Sie können den code in JSFiddle hier: http://jsfiddle.net/3zhbB/2/

InformationsquelleAutor der Frage DaveJ | 2012-09-20

angularjs

26

Machen $scope.dates ein array von arrays, die mit den Tagen.

Jedes array in der es eine Zeile, und jeder Tag in der Zeile des Arrays ist ein Tag

Sehen diese aktualisierte JSFiddle http://jsfiddle.net/6aqtj/1/

InformationsquelleAutor der Antwort Renan Tomal Fernandes

Wenn Sie möchten, lassen Sie Ihren Umfang Daten, so wie es ist (als ein array), können Sie schreiben eine Richtlinie, die und Kapseln, alle HTML-generation, daher:

<div ng-controller="MyCtrl">
    <calendar></calendar>
</div>

myApp.directive('calendar', function() {
//Requires that scope contains a 'monthDays' array.
//Adds 'weeks' to scope.
return {
    restrict: 'E',
    replace: true,
    template: '<table cellspacing="0" cellpadding="0">'
    + ...
    + '<th scope="col" title="Sunday">Sun</th></tr>'
    + '<tr ng-repeat="week in weeks">'
    + '<td ng-repeat="day in week">{{day}}</td>'
    + '</tr></tbody></table>',
    link: function(scope) {
        scope.weeks = [];
        for (var i = 0; i < scope.monthDays.length; i++) {
            if (i % 7 == 0) {
                scope.weeks.push([]);
            }
            scope.weeks[scope.weeks.length-1].push(scope.monthDays[i]);

Fiddle: http://jsfiddle.net/mrajcok/dGpsr/

InformationsquelleAutor der Antwort Mark Rajcok

5

Können Sie dies tun, ziemlich leicht mit Ihren aktuellen Daten. Ich habe gerade einen einfachen filter: http://jsfiddle.net/3zhbB/6/

Es ist nicht wirklich die beste Lösung, obwohl, wie es ist ziemlich ineffizient. Es wird ein neues array und eine Menge von schneiden. Aber es ist immer noch geil 😀

InformationsquelleAutor der Antwort Andrew Joslin

Stimme ich mit Renan über das array von arrays und bekam gefangen in einem Versuch zu machen, diese mehr-Kalender-wie. Angenommen, Sie wollen leere Zellen der Tabelle, und Sie möchten, dass der Monat auf den richtigen Tag der Woche (0-6). Haben Sie einen Blick auf diese Funktion:

function generateWeeks(startDay, numDays){
  var weeks = [];
  var numWeeks = (numDays + startDay) / 7;
  for(var i=0; i<numWeeks; i++){
    weeks[i] = [];
    for(var j=0; j<7; j++){
      if(i==0 && j<startDay){
        weeks[i].push('');
      }else{
        var day = (j-startDay+1)+(i*7);
        weeks[i].push(day<=numDays ? day : '');
      }
    }
  }
  return weeks;
}

Für den aktuellen Monat, ich würde Sie anrufen und generateWeeks(5,30). September hat 30 Tage und begann am Samstag (und Ihre Kalender-Woche Montag - Sonntag).

<tr ng-repeat="week in weeks">
  <td ng-repeat="day in week">{{day}}
</tr>

InformationsquelleAutor der Antwort grendian

1

Nur hatte dieses problem selbst. Anstelle von html-Tabellen, obwohl, ich werde verwenden Sie eine unsortierte Liste über eine einzelne "Tage" - Kollektion und css verwenden, um es Aussehen wie eine Tabelle. Also, wenn jedes element ist mit 14% weit, es wird wrap auf 7 automatisch.

Dies war die Geburtsstunde von meinem Ansatz:
Erstellen dreispaltige Tabelle mit CSS? (Kein table-element)

InformationsquelleAutor der Antwort Mark Nadig

Könntest du eine bedingte wie $index % 7 == 0 zu schreiben, die </tr><tr>

Ich gerade erstellt eine einfache Tabelle wie diese:

<style type="text/css">
    .selectable.year {
        display:inline-block; 
        width:25%;
        border-right-width:0px;
        text-align: center;
    }
    .selectable.year.first {
        margin-left:0;
    }
    .selectable.year.lastcol, .selectable.year:last-child {
        border-right-width:1px;
    }
</style>
<div class="calendar">
    <div class="selectable year" 
        ng-class="{ 'firstcol' : $index % 4 == 0 , 'lastcol' : $index % 4 == 3 }"
        ng-repeat="year in search.yearList"
        <span class="caption">{{ year }}</span>
    </div>
</div>

wie Sie sehen können, packt es .. es ist nicht ein Tisch, wirklich.

InformationsquelleAutor der Antwort commonpike

0

Dies ist eine alte Frage, die doch nun hat eine saubere Antwort! Den gesamten Prozess zu wiederholen, komplexe Abschnitte in eckigen erheblich verbessert durch die Verwendung der ng-repeat-start und ng-repeat-enddas erfahren Sie im detail hier:

http://www.undefinednull.com/2015/04/10/repeating-multiple-elements-using-ng-repeat-start-and-ng-repeat-end-in-angularjs/

InformationsquelleAutor der Antwort Paw

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.