Повторение таблицы данных 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>

1

Решение

Ты можешь использовать 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>
0

Другие решения

Ты можешь использовать 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>

Демо-версия: http://plnkr.co/edit/3MPj3okUsi3swJvSfdAr?p=preview

2

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector