Динамическая таблица AngularJS с неизвестным количеством столбцов

Я новичок в Angular, и мне нужна отправная точка для моего проекта. Как я могу создать новую таблицу из данных ajax, щелкнув мышью по фону? Я знаю, что данные ajax имеют неизвестное количество столбцов и могут время от времени отличаться.

Например:

the first click on background = table 1, ajax request to /api/table
| A | B | C |
| 1 | 2 | 3 |
| 5 | 7 | 9 |

the second click on background = table 2 and server returns new data from the same url /api/table
| X | Y |
| 5 | 3 |
| 8 | 9 |

dynamic angularjs tabular
person Max Tkachenko    schedule 08.01.2015    source источник
comment
Не могли бы вы показать пример результата запроса сервера?   -  person David Frank    schedule 09.01.2015
comment
Да, конечно: testarium.makseq.com/temp/table1.json и testarium.makseq.com/temp/table2.json   -  person Max Tkachenko    schedule 09.01.2015

Ответы (3)


arrow_upward
34
arrow_downward

В основном вы можете использовать два вложенных повтора ng следующим образом:

<table border="1" ng-repeat="table in tables">
  <tr>
      <th ng-repeat="column in table.cols">{{column}}</th>
  </tr>
  <tr ng-repeat="row in table.rows">
    <td ng-repeat="column in table.cols">{{row[column]}}</td>
  </tr>
</table>

В контроллере:

function MyCtrl($scope, $http) {
    $scope.index = 0;
    $scope.tables = [];
    $scope.loadNew = function() {
        $http.get(/*url*/).success(function(result) {
            $scope.tables.push({rows: result, cols: Object.keys(result)});
        });
        $scope.index++;
    }
}

Затем вызовите loadNew() где-нибудь, например. <div ng-click="loadNew()"></div>

Пример: http://jsfiddle.net/v6ruo7mj/1/

person David Frank    schedule 08.01.2015
comment
большое спасибо! Но как я могу создать таблицу динамическим щелчком мыши? Мне нужно несколько таблиц (по одной на каждый клик)... - person Max Tkachenko; 09.01.2015
comment
Привет. Спасибо за это. Но что, если мне нужно отформатировать данные определенного столбца, например поля даты. Как можно сделать шапку? - person Nikhil Mahajan; 03.02.2016
comment
@NikhilMahajan Вы либо извлекаете уже отформатированные данные, либо форматируете их в функции loadNew(), либо переписываете ng-repeat=column.. вручную, отображая каждый столбец по своему усмотрению. - person David Frank; 03.02.2016

arrow_upward
2
arrow_downward

зарегистрируйте директиву ng-click в фоновом элементе для загрузки данных через ajax и используйте ng-repeat для отображения данных неопределенной длины.

<div ng-click="loadData()">
    <table ng-repeat="t in tables">
        <tr ng-repeat="row in t.data.rows">
            <td ng-repeat="col in row.cols">
                {{col.data}}
            </td>
        </tr>
    </table>
</div>

в контроллере:

$scope.tables = [];

$scope.loadData = function() {
    // ajax call .... load into $scope.data

    $.ajax( url, {
        // settings..
    }).done(function(ajax_data){
        $scope.tables.push({
            data: ajax_data
        });
    });

};
person benri    schedule 08.01.2015
comment
спасибо! а что, если мне нужно несколько таблиц: по одной на каждый клик? - person Max Tkachenko; 09.01.2015
comment
добавьте ng-repeat в таблицу: <table ng-repeat="t in tables"></table>, измените loadData для добавления к массиву таблиц, и каждая таблица представляет собой объект, содержащий данные таблиц. (отредактированный ответ) - person benri; 09.01.2015

arrow_upward
1
arrow_downward

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

<thead> 
    <tr>
        <th ng-repeat="column in columns">{{column}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in rows">
        <td ng-repeat="column in columns track by $index"> {{row.item[$index]}} </td>
    </tr>
</tbody>

Надеюсь это поможет

person phix    schedule 26.10.2015