Повторение таблицы данных Angularjs JSON в зависимости от условия
У меня есть небольшая задача по созданию таблицы из json, которую я получаю из веб-сервиса, используя angularjs
Создание нормальной таблицы работает нормально для меня, но в зависимости от типа, я должен сделать col span. например
если тип — Производство, то нет столбца
если тип является продуктом, то я должен объединить все 3 столбца
если тип Сводка, то я должен объединить первые 2 столбца
Пожалуйста, обратите внимание, что этот код не работает, потому что я должен удалить Тип продукта и производителя.
Пожалуйста, помогите мне отформатировать вывод, как показано ниже
*-------------------------------*
| Manufacturer | Rate | Disc% |
+--------------|-------|--------+
| Product A |
|--------------+-------+--------|
| Manuf.A | 500 | 2 |
|--------------+-------+--------|
| Manuf.b | 450 | 0 |
|--------------+-------+--------|
| Manuf.c | 400 | 1 |
|--------------+-------+--------|
| No of Suppliers | 3 |
+-------------------------------+
JS
var app = angular.module('Products', []);
app.controller('MainCtrl', function($scope) {
$scope.array = [
{"Name":"Product A","Type":"Product"},
{"Name":"Manufacturer A","Rate":"100","discount":"2%","Type":"Manufacturer"},
{"Name":"Manufacturer B","Rate":"90","discount":"1%","Type":"Manufacturer"},
{"Name":"Manufacturer C","Rate":"95","discount":"XXXXXX","Type":"2%"},
{"Name":"No Of Suppliers","total":"3","Type":"Summary"}];
});
HTML-файл
<!DOCTYPE html>
<html ng-app="Products">
<head>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="app1.js"></script>
<style>
td
{
vertical-align: middle;
}
</style>
</head>
<body ng-Controller="MainCtrl">
<table border="1">
<thead>
<tr>
<th>Manufacturer</th>
<th>Rate</th>
<th>Disc%</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in array track by $index">
<td>{{item.Name}}</td>
<td >{{item.Rate}}</td>
<td >{{item.discount}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Решение
Ты можешь использовать ng-show за это:
<tr ng-repeat="item in array track by $index">
<td colspan="3" ng-show="item.Type == 'Product'">{{item.Name}}</td>
<td colspan="2" ng-show="item.Type == 'Summary'">{{item.Name}}</td>
<td ng-show="item.Type != 'Product' && item.Type != 'Summary'">{{item.Name}}</td>
<td ng-show="item.Type != 'Product' && item.Type != 'Summary'">{{item.Rate}}</td>
<td ng-show="item.Type != 'Product' && item.Type != 'Summary'">{{item.discount}}</td>
<td ng-show="item.Type == 'Summary'">{{item.total}}</td>
</tr>
Другие решения
Ты можешь использовать ng-repeat-start а также ng-repeat-end директивы:
<tbody>
<tr ng-repeat-start="item in array track by $index" ng-if="item.Type == 'Manufacturer'">
<td>{{item.Name}} {{item.Type}}</td>
<td>{{item.Rate}}</td>
<td>{{item.discount}}</td>
</tr>
<tr ng-if="item.Type == 'Product'">
<td colspan="3">
{{item.Name}}
</td>
</tr>
<tr ng-repeat-end ng-if="item.Type == 'Summary' ">
<td colspan="2">{{item.Name}}</td>
<td>{{item.total}}</td>
</tr>
</tbody>