テーブルをng-repeatで読み込み、一致するヘッダーデータを確認する

Question

テーブルのヘッダー行を設定するために使用する年の配列があり、テーブルを作成するために使用するオブジェクトがあります。 対応する年ヘッダの下に正しい年データを設定する必要があるので、オブジェクトの年（Y）がヘッダ配列の年に対応するかどうかを確認する必要があります。空のセル。オブジェクトは年ごとにソートされます。それを行う最善の方法は何でしょうか？ここ は、私はDOM

<table border="1" data-ng-app="testModule" data-ng-controller="testController"> 
    <thead> 
    <tr> 
     <th ng-repeat="i in headerYears">{{i}}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr > 
     <td ng-repeat="i in headerYears" >{{i}} 
     <span ng-repeat="row in rows"></span> 
     <span ng-repeat="item in row.Col">{{item.Y}} </span> 
     </td>  
    </tr> 
    </tbody> 
</table> 

でNG-IFを行うだろうfiddle

CONTROLLER

var app = angular.module("testModule", []); 
app.controller('testController', function($scope) { 
$scope.headerYears = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]; 

$scope.rows = [{ 
    "Name": "Name1", 
    "Col": [{ 
    "Y": 2013, 
    "M": 25711 
    }, { 
    "Y": 2014, 
    "M": 26095 
    }, { 
    "Y": 2015, 
    "M": 23641 
    }, { 
    "Y": 2016, 
    "M": 22224 
    }, { 
    "Y": 2017, 
    "M": 21968 
    }, { 
    "Y": 2018, 
    "M": 23820 
    }, { 
    "Y": 2019, 
    "M": 26673 
    }, { 
    "Y": 2020, 
    "M": 29329.5 
    }] 
}, { 
    "Name": "Name2", 
    "Col": [{ 
    "Y": 2013, 
    "M": 83 
    }, { 
    "Y": 2014, 
    "M": 461 
    }, { 
    "Y": 2015, 
    "M": 1067 
    }, { 
    "Y": 2016, 
    "M": 1120 
    }, { 
    "Y": 2017, 
    "M": 1050 
    }, { 
    "Y": 2018, 
    "M": 600 
    }, { 
    "Y": 2019, 
    "M": 475 
    }, { 
    "Y": 2020, 
    "M": 481 
    }] 
}, { 
    "Name": "Name3", 
    "Col": [{ 
    "Y": 2013, 
    "M": 25794 
    }, { 
    "Y": 2014, 
    "M": 26556 
    }, { 
    "Y": 2015, 
    "M": 24708 
    }, { 
    "Y": 2016, 
    "M": 23424 
    }, { 
    "Y": 2017, 
    "M": 23297 
    }, { 
    "Y": 2018, 
    "M": 24412.5 
    }, { 
    "Y": 2019, 
    "M": 27090.5 
    }, { 
    "Y": 2020, 
    "M": 29754.5 
    }] 
}] 
}); 

HTML

<table border="1" data-ng-app="testModule" data-ng-controller="testController"> 
    <thead> 
    <tr> 
     <th ng-repeat="i in headerYears">{{i}}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="item in row.Col">{{item.M}}{{item.Y}}</td> 
    </tr> 
    </tbody> 

Answer 1

です編集：スパンng-if = "item.Y == i"と別のspan ng-if = "item.Y！= i"のようなスパンにNG-IFを追加できます

Answer 2

row.colの長さあなたのテーブルが列に一貫性を持っていることを確認する必要があります。

これは、各行に対して、同じ列サイズを作成するためにheaderYearsをリピートする必要があることを意味します。

あなたが解決策を提供するかもしれないplunkerを見てください。

コントローラで指定された年にバインドされたオブジェクトの新しい配列を作成し、次にこの新しい配列にng-repeatすることをお勧めします。

これは、よりクリーンなDOMを提供し、より簡単に維持することができます。

カラムデータを読み込み、それぞれの状況に合ったものを返すためにフィルタを追加しました。

app.filter('testFilter', function() { 
    return function(col, header) { 
     if (!col){ 
     return "Empty"; 
     } 
     if (!header){ 
     return "Empty"; 
     } 


     var returnVal="Empty Item"; 
     angular.forEach(col, function(colItem){ 
     if(header===colItem.Y) { 
      returnVal = colItem.M+" "+colItem.Y; 
     } 
     }); 

    return returnVal; 

    } 
}); 

はまた、私はDOMを変更し、今では、以下の

<tbody> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="i in headerYears"> 
     {{row.Col | testFilter:i }} 
     </td> 
    </tr> 
</tbody> 

Answer 3

これはうまく機能して（つまり、あなたが置くことができ、表示したいすべての値に対してカスタムフィルタを構築するよりも優れているようsomehtingに見えますTDの中であなたが望むどんなHTMLでも、{{item.myProperty}}を普通のように使用してください）。楽しい！

すべてのデータをヘッダーに一致する形式に変換します。これにより、JSは最も優れた処理を行い、その後、きれいなデータをAngularに渡します。希望が助けてくれる！

//START OF GOOD CODE 
$scope.rows = null; 

(function(){ 
    var raw = [{ /** this is all your current "rows" data, just moved**/ }]; 

    var bucketize = function(col) { 
     var data = new Array(); 
     for (var i = 0; i < $scope.headerYears.length; i++) { 
      data.push({}); //initialize to match headerYears setup 
      for (var j = 0; j < col.length; j++) { 
       if (col[j].Y == $scope.headerYears[i]) { 
        data[i] = col[j]; //replace initialized value with real data 
       } 
      } 
     } 
     return data; 
    }; 

    var rows = new Array(); 

    for (var x = 0; x < raw.length; x++) { 
    var row = raw[x]; 
    row.Col = bucketize(row.Col); //sort data and format it for our desired HTML   
    rows.push(row); 
    } 

    $scope.rows = rows; //give the scrubbed data to Angular 
})(); 
//END OF GOOD CODE 

--EDIT--

がbucketize（）関数を呼び出すたびに新しい配列を（）を返すため、次の無限ループダイジェストを作成します。代わりに、データを角度にする前にスクラブしてください（上記参照）。あなたはAJAXの成功ハンドラでこれを行うことができます。あるいは上記のようにSEAFを使用することもできます。

//NOTE THIS IS BAD, DUE TO INFINITE LOOP CAUSED BY "new Array();" 
... 
<td ng-repeat="item in bucketize(row.Col)">{{item.Y}}</td> 
... 
$scope.bucketize = function(col) { 
    var data = new Array(); 
    for (var i = 0; i < $scope.headerYears.length; i++) { 
     data.push({}); //initialize to match headerYears setup 
     for (var j = 0; j < col.length; j++) { 
      if (col[j].Y == $scope.headerYears[i]) { 
       data[i] = col[j]; //replace initialized value with real data 
      } 
     } 
    } 
    return data; 
}; 
//END OF BAD CODE 

• キーロン