Как использовать CSS-сетку с динамическим количеством столбцов и строк? - PullRequest
Новая
       24

Как использовать CSS-сетку с динамическим количеством столбцов и строк?

0 голосов
/ 16 октября 2019

Я пытаюсь создать таблицу в Angular с динамическим числом столбцов и строк. Я нашел, что это легко сделать, используя элемент таблицы HTML, выполнив что-то вроде этого: 

    <table class="html-table">
      <tr class="headers">
        <th>Name</th>
        <th>Age</th>
        <th>Sex</th>
        <th *ngIf="columns == 4">Species</th>
      </tr>
      <tr>
        <td>Ryan</td>
        <td>30</td>
        <td>M</td>
        <td *ngIf="columns == 4">Human</td>
      </tr>
    </table>

В этом примере может быть какая-то кнопка, которая переключает значение columns между 3 и 4.

Каждое объяснение, которое я смотрел в Интернете, включает в себя изменение CSS-переменных, что кажется довольно хакерским способом сделать что-то простое. Можно ли каким-то образом указать, что что-то должно быть новым столбцом в сетке CSS, а не указывать количество столбцов в grid-template-columns?

1 Ответ

0 голосов
/ 16 октября 2019

В Angular вы можете использовать ng-repeat, чтобы иметь динамическую таблицу

Типичным примером может быть 

<table ng-table="tableParams" class="table table-striped">
   <tr ng-repeat="data in datas">
      <td title="Title_Of_First_Variable">{{data.variable1}}</td>
      <td title="Title_Of_Second_Variable">{{data.variable2}}</td>
      <td title="Title_Of_Third_Variable">{{data.variable3}}</td>
      ...
   </tr>
</table>

Конечно, с вашим контроллером вы должны передавать свои динамические данные в правильные$ scope, в этом случае должно быть $ scope.datas (обычно объект) ... может быть что-то вроде этого, используя NodeJS: 

$http.post('route_of_your_method')
.success(function (result) {
     $scope.datas = result;      
})
.error(function (err) {
     ...
});

Я объяснил быстро, но я надеюсь, что этого достаточно

...