Создать таблицу из модели AngularJS

Question

Мне нужна помощь для рендеринга таблицы html с использованием модели Angular.

Во-первых, у меня есть модель, которая указывает, что мне нужно отобразить таблицу, и список «вопросов», которые должны отображаться в таблице.

пример

данных:

{ 

    "Id": 25546, 
    "questionType": "Table", 
    "maxRows": 2, 
    "maxCols": 3, 
    "questionsInTable": [{ 
     "isActive": true, 
     "questionText": "Table Title", 
     "validation": "false", 
     "rowPosition": 1, 
     "colPosition": 1, 
     "isPrintable": true, 
     "Answer": null, 
     "Type": "Label" 
    }, { 
     "isActive": true, 
     "questionText": "2014", 
     "validation": "false", 
     "rowPosition": 1, 
     "colPosition": 2, 
     "isPrintable": true, 
     "Answer": null, 
     "Type": "Label" 
    }, { 
     "isActive": true, 
     "questionText": "2013", 
     "validation": "false", 
     "rowPosition": 1, 
     "colPosition": 3, 
     "isPrintable": true, 
     "Answer": null, 
     "Type": "Label" 
    }, { 
     "isActive": true, 
     "questionText": "Another description here", 
     "validation": "false", 
     "rowPosition": 2, 
     "colPosition": 1, 
     "isPrintable": true, 
     "Answer": null, 
     "Type": "Label" 
    }, { 
     "isActive": true, 
     "questionText": "DescFor2014", 
     "validation": "true", 
     "rowPosition": 2, 
     "colPosition": 2, 
     "isPrintable": true, 
     "Answer": null, 
     "Type": "InputText" 
    }, { 
     "isActive": true, 
     "questionText": "DescFor2013", 
     "parentQuestion": 25546, 
     "validation": "true", 
     "rowPosition": 2, 
     "colPosition": 3, 
     "isPrintable": true, 
     "Answer": null, 
     "Type": "InputText" 
    }] 
} 

Каждый элемент (или вопрос) является предоставление строки и столбца позиции в таблице, также данных имеет два элемента с Max строк и столбцов. Я могу создать таблицу, используя данные MaxRows и MaxCols, но я стараюсь вставить вопрос в правильную ячейку.

Результат должен быть выше пример:

Рендер выходного примера:

<table> 
<tr> 
    <td>Table Title</td> 
    <td>2014</td> 
    <td>2013</td> 
</tr> 
    <tr> 
     <td>Another description here</td> 
     <td>DescFor2014</td> 
     <td>DescFor2013</td> 
    </tr> 
</table> 

Есть ли способ, чтобы выполнить это ?.

Буду признателен за вашу помощь или если вы можете указать мне в правильном направлении.

Answer 1

Я создал Plunkr для вашего решения - http://plnkr.co/edit/4vUm8yRiDKlTM8lnQH7E?p=preview.

Чтобы создать строку/столбец для таблицы, я создал 2 массива - строки и столбцы.

 $scope.rows = []; 
      for (var i=0;i<$scope.tableData.maxRows;i++) { 
      $scope.rows.push(i); 
     } 

     $scope.cols = []; 
      for (var i=0;i<$scope.tableData.maxCols;i++) { 
      $scope.cols.push(i); 
     } 

HTML, был сохранен как:

<table> 
    <tr ng-repeat="i in rows"> 
    <td ng-repeat="j in cols"> 
     <div table-pos object="tableData.questionsInTable" row="i" col="j"></div> 
    </td> 
    </tr> 
</table> 

стол-полюсной директива, которая будет принимать индекс массива вопросов, строк и столбцов в качестве атрибутов области видимости. Я использовал underscore.js для извлечения правильного объекта из набора вопросов и отображения вопроса для этой позиции (на основе rowPosition и colPosition).Код выглядит следующим образом:

.directive("tablePos", function() { 
    return { 
    template: "<div>{{data}}</div>", 
    scope: { 
    object: "=", 
    row: "=", 
    col:"=" 
    }, 
    link: function(scope) { 
    var questions = scope.object; 
    var question= _.findWhere(questions, {colPosition:scope.col+1, rowPosition: scope.row+1}); 
    scope.data = question.questionText; 
    } 
    } 
}) 

Основное преимущество использования директивы является то, что существует не требуется для вопросов в списке не должны быть отсортированы в любом порядке. Таким образом, вы можете добавлять вопросы в любом порядке в вашем массиве. Пока свойство rowPosition и colPosition правильно определено, директива подберет его.
Плюс директива также поддерживает пустые ячейки/разреженные массивы, поэтому, если какой-либо вопрос для конкретной ячейки отсутствует, директива будет показывать пустые данные.

Один из недостатков заключается в том, что если более одного вопроса имеют одинаковые rowPosition и colPosition, тогда будет выбран только первый вопрос, а оставшиеся вопросы будут игнорироваться молча.

Обратите внимание: если вы не хотите использовать underscope.js, вы можете использовать обычный JavaScript для определения правильного вопроса из списка. Однако использование underscore.js упрощает работу, поскольку основная логика абстрагируется.

Answer 2

Пожалуйста, обратитесь к этому шлепнуть: http://plnkr.co/edit/xTagjy1n9tl0CvnDH5Q3?p=preview

Вы в основном должны нг-повторять строки до maxRows и нг-повторить COLS до maxCols:

<table> 
    <tr ng-repeat="i in [] | range:(tableData.maxRows)"> 
    <td ng-repeat="j in [] | range:(tableData.maxCols)"> 
     {{tableData.questionsInTable[j + i*tableData.maxCols].questionText}} 
    </td> 
    </tr> 
</table> 

Range является функцией фильтра:

angular.module('app').filter('range', function() { 
    return function(input, total) { 
    total = parseInt(total); 
    for (var i=0; i<total; i++) 
     input.push(i); 
    return input; 
    }; 
}); 

Примечание: Это будет работать только тогда, когда:

1. Сортировка строк, cols. Если нет, вам придется сначала отсортировать их , а затем привязать их к таблице

2. не работает для разреженных массивов. В случае разреженных массивов вы должны создать фиктивные объекты, которые должны быть проигнорированы при создании таблицы

Кроме проверку вашего объекта JSON в вопросе вы публикуемый перед началом работы. Он выглядит некорректным: http://jsonlint.com/