как построить динамическую сетку с JSON и angularJS

Question

Я хочу использовать AngularJS. Хотите построить табличную сетку на основе JSON ниже.

{ 
    "gridLayout": "4.4", 
    "tmatrix": [{ 
      "id": "1.1", 
      "periodId": "3", 
      "classId": "5", 
      "subjectId": "2", 
      "teacherId": "Rob", 
      "NoteId": "8" 
     }, { 
      "id": "2.4", 
      "periodId": "3", 
      "classId": "5", 
      "subjectId": "2", 
      "teacherId": "4", 
      "NoteId": "8" 
     } 

    ] 
} 

gridLayout будет определять количество col.row, например "gridLayout":"4.4" означают 4 Col & 4 строки

Id будет определять позицию в table, например "id":"1.3" среднее Col = 1.Row = 3

как захватить позицию блока в таблице.

|------|------|------|------| 
| 1.1 | 2.x | 3.x | 4.x | 
|(Rod) |  |  |  | 
|------|------|------|------| 
| 1.x |  |  |  | 
|  |  |  |  | 
|------|------|------|------| 
| 1.x |  |  |  | 
|  |  |  |  | 
|------|------|------|------| 
| 1.x | 2.4 |  |  | 
|  |  |  |  | 
|------|------|------|------| 

Может кто-нибудь дать некоторое представление о том, как это сделать или какой-либо в директиве сборки плагина

Answer 1

это пример

http://plnkr.co/edit/fQOUPAmuh6MqMtmrNLKM?p=preview

<table > 
    <tr ng-repeat="r in range(0,row)"> 
     <td ng-repeat="c in range(0,col)" ng-click="clickon(c+1,r+1)"> {{getDataForID(c+1 , r+1) |json}} </td> 
    </tr> 
</table> 

Контроллер

var app = angular.module('plunker', []) 
.controller('MainCtrl', function($scope) { 

    $scope.data = [{ 
      "id": "1.1", 
      "periodId": "3", 
      "classId": "5", 
      "subjectId": "2", 
      "teacherId": "4", 
      "NoteId": "8" 
     }, { 
      "id": "2.4", 
      "periodId": "3", 
      "classId": "5", 
      "subjectId": "2", 
      "teacherId": "4", 
      "NoteId": "8" 
     } 
    ]; 



    $scope.row = 4; 
    $scope.col = 6; 

    $scope.range = function(min, max, step) { 
    step = step || 1; 
    var input = []; 
    for (var i = min; i <= max; i += step) { 
     input.push(i); 
    } 
    return input; 
    }; 

    $scope.clickon = function(c,r){ 
    console.log(c + '/' + r); 
    } 

    $scope.getDataForID = function (c,r){ 
    for(var i in $scope.data){ 
     if($scope.data[i]["id"]== c+'.'+r){ 
     return $scope.data[i]; 
     } 
    } 
    return c+'.'+r 
    } 
});