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＆amp; 4行

我将定义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
   }
});

如何使用JSON和angularJS

1 个答案: