테이블 행에 ng-반복 사용

테이블 행에 ng-반복 사용

모델의 데이터를 템플릿에 삽입하려고 하는데 7번 반복할 때마다 새로운 테이블 행을 추가하고 싶습니다.strig 기반 템플릿을 사용하면 반복 인덱스와 모듈로를 사용하여 꽤 쉽게 수행할 수 있지만 angular의 DOM 템플릿을 사용하여 이 작업을 수행하는 방법을 잘 알 수 없습니다.

HTML은 다음과 같습니다.

<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>

자바스크립트는 다음과 같습니다.

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

JSFiddle에서 코드를 볼 수 있습니다. http://jsfiddle.net/3zhbB/2/

만들다$scope.dates시대별로 배열된 배열들

그 안의 각 배열은 행이고, 그 행의 배열 안의 각 날은 하루입니다.

이 업데이트된 JSFiddle http://jsfiddle.net/6aqtj/1/ 참조

스코프 데이터를 그대로 유지하려면 지침을 작성하고 모든 HTML 생성을 캡슐화할 수 있으므로 다음을 수행할 수 있습니다.

<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/

현재 데이터로 이 작업을 쉽게 수행할 수 있습니다.방금 간단한 필터를 추가했습니다. http://jsfiddle.net/3zhbB/6/

그러나 이는 매우 비효율적이기 때문에 실제로 최선의 해결책은 아닙니다.새 배열을 만들고 슬라이싱을 많이 해야 합니다.그래도 시원하네요 :-D

배열 배열에 대해서는 레넌의 의견에 동의하고 달력을 좀 더 비슷하게 만들려는 시도에 휘말렸습니다.테이블 셀을 빈 상태로 만들고 월을 올바른 요일(0-6)에 시작한다고 가정합니다.다음 기능을 살펴봅니다.

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

이번 한 달간은 generate로 전화를 걸겠습니다.몇 주(5,30).9월은 30일로 토요일에 시작합니다(달력 주간은 월요일 - 일요일).

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

저도 이런 문제가 있었습니다.html 테이블 대신에, 저는 한 번의 "days" 컬렉션에 걸쳐 순서 없는 목록을 사용하고 css를 사용하여 테이블처럼 보이게 할 것입니다.따라서 각 요소의 너비가 14%인 경우 자동으로 7에 감깁니다.

이것이 제 접근법의 시작이었습니다: CSS로만 3열 테이블을 만드는 것? (Notable element)

당신은 조건을 사용할 수 있습니다.$index % 7 == 0글을 쓰다</tr><tr>

방금 이렇게 간단한 테이블을 만들었습니다.

<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>

보다시피, 그것은..테이블이 아닙니다, 정말 아닙니다.

이것은 오래된 질문이지만 지금은 깨끗한 답을 가지고 있습니다!복잡한 단면을 각도로 반복하는 전체 과정은 다음을 사용하여 크게 향상됩니다.ng-repeat-start그리고.ng-repeat-end, 자세한 내용은 여기에서 확인하실 수 있습니다.

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

각도 5+의 경우 ng-반복 대신 ngFor를 사용합니다.

 <tr *ngFor="let mi of mileages; let i = index">
                            <td>{{mi.fromAddress}}</td>
</tr>

언급URL : https://stackoverflow.com/questions/12518259/using-ng-repeat-with-table-rows