Как обрабатывать столбцы переменной строки в таблице фиксированной колонке

Question

Моя таблица будет выглядеть примерно так:

<table> 
<thead> 
    <tr> 
     <th>Entry</th> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr>  
</thead> 
<tbody> 
    <tr> 
     <td>Cooper</td> 
     <td>Vikings</td> 
     <td>Giants</td> 
     <td>Rams</td> 
    </tr> 
    <tr> 
     <td>Jon Doe</td> 
     <td>Bears</td> 
     <td></td> 
     <td>Seahawks</td> 
    </tr> 
</tbody> 

И мои данные будут что-то вроде этого:

{ 
"name" : "Cooper", 
"picks" [{"w1": "vikings"}, {"w2" : "Giants"}, {"w3" : "Rams"}] 
}, 
{ 
"name" : "Jon Doe", 
"picks" [{"w1": "Bears"}, {"w3" : "Seahawks"}] 
} 

I «Я ищу советы о том, как лучше всего создавать свои результаты. Это простой пример, моя реальная модель будет иметь 30 столбцов, поэтому я, вероятно, скрою некоторые из них в зависимости от того, на какой неделе она. Выбор будет в порядке, но я не могу быть уверен, что все недели будут представлены. В моем примере выше Jon Doe забыл сделать выбор за неделю 2.

Благодаря

Answer 1

Это решение требует, чтобы структура данных переключается из массива в объект, содержащий ключи для каждой недели. Это не потребует, чтобы вы вставляли в массив фиктивную запись или неопределенные записи, хотя я не думаю, что это решение не так уж плохо.

В приведенном ниже фрагменте показана директива, которая поможет решить вашу проблему. Обратите внимание, что в html для директивы (элемент tbody) я установил max-columns в 3 для соответствия вашим данным.

angular.module("app", []) 
 
    .controller("pickersCtrl", ['$scope', 
 
    function($scope) { 
 
     $scope.data = [{ 
 
     "name": "Cooper", 
 
     "picks": { 
 
      "w1": "Vikings", 
 
      "w2": "Giants", 
 
      "w3": "Rams" 
 
     } 
 
     }, { 
 
     "name": "Jon Doe", 
 
     "picks": { 
 
      "w1": "Bears", 
 
      "w3": "Seahawks" 
 
     } 
 
     }]; 
 
    } 
 
    ]) 
 
    .directive("pickersRepeat", [ 
 
    function() { 
 
     return { 
 
     restrict: 'EA', 
 
     scope: { 
 
      pickers: '=', 
 
      maxColumns: '@' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
      scope.$watch("pickers", function(pickers) { 
 
      if (!pickers) { 
 
       return; 
 
      } 
 
      var maxColumns = +scope.maxColumns; 
 
      for (var i = 0; i < pickers.length; i++) { 
 
       var picker = pickers[i]; 
 
       var row = angular.element('<tr/>'); 
 
       element.append(row); 
 
       var nameColumn = angular.element('<td/>').text(picker.name); // append user name to Entry row 
 
       row.append(nameColumn); 
 
       var picks = picker.picks; // get user picks 
 
       
 
       for (var j = 0; j < maxColumns; j++) { 
 
       var column = angular.element('<td/>'); 
 
       row.append(column); 
 
       var pick = picks["w" + (j + 1)]; // since the wX seem to start with 1 instead of 0 we add 1 here 
 
       if (pick) { 
 
        // user made a pick for week j 
 
        column.text(pick); // put the text in column j 
 
       } 
 
       } 
 
      } 
 
      }); 
 
     } 
 
     }; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <table ng-controller="pickersCtrl"> 
 
    <thead> 
 
     <tr> 
 
     <th>Entry</th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody pickers-repeat pickers="data" , max-columns="3"> 
 
    </tbody> 
 
    </table> 
 
</div>