25

モデルからテンプレートにデータを挿入しようとしていますが、7回繰り返すごとに新しいテーブル行を追加したいと思います。strignベースのテンプレートでは、反復インデックスとモジュロを使用して非常に簡単に実行できましたが、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>

そして、JavaScriptは次のようになります。

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/

4

8 に答える 8

26

日で配列$scope.datesの配列を作成します。

その中の各配列は行であり、行の配列内の毎日は1日です

この更新されたJSFiddlehttp://jsfiddle.net/6aqtj/1/を参照してください

于 2012-09-20T18:23:03.343 に答える
9

スコープデータを（配列として）そのままにしておきたい場合は、ディレクティブを記述して、そこにすべての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]);

フィドル： http： //jsfiddle.net/mrajcok/dGpsr/

于 2012-09-20T20:44:00.590 に答える
5

これは、現在のデータを使用して非常に簡単に行うことができます。単純なフィルターを追加しました：http：//jsfiddle.net/3zhbB/6/

それはかなり非効率的であるため、それは実際には最良の解決策ではありません。新しいアレイを作成し、多くのスライスを行う必要があります。しかし、それでもかっこいいです:-D

于 2012-09-20T22:39:32.693 に答える
4

私は配列の配列についてRenanに同意し、これをよりカレンダーのようにする試みに巻き込まれました。空白のテーブルセルが必要であり、月を正しい曜日（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;
}

今月は、generateWeeks（5,30）と呼びます。9月は30日で、土曜日に始まります（そして、暦週は月曜日から日曜日です）。

<tr ng-repeat="week in weeks">
  <td ng-repeat="day in week">{{day}}
</tr>
于 2012-09-20T18:46:24.347 に答える
1

自分でこの問題を抱えていました。ただし、htmlテーブルの代わりに、単一の「日」コレクションで順序付けされていないリストを使用し、cssを使用してテーブルのように見せます。したがって、各要素の幅が14％の場合、自動的に7にラップされます。

これが私のアプローチの起源でした 。CSSのみで3列のテーブルを作成しますか？（テーブル要素なし）

于 2013-04-17T23:40:50.260 に答える
0

条件付きのようなものを使用$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>

ご覧のとおり、実際にはテーブルではなくラップします。

于 2016-02-19T14:26:03.847 に答える
0

これは古い質問ですが、今では明確な答えがあります。複雑なセクションを角度で繰り返すプロセス全体は、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/

于 2016-06-29T17:07:41.107 に答える
0

角度5+の場合は、ng-repeatの代わりにngForを使用します。

 <tr *ngFor="let mi of mileages; let i = index">
                            <td>{{mi.fromAddress}}</td>
</tr>
于 2019-03-07T06:26:49.607 に答える