AngularJS ng-repeat dynamic rowspan

Question

I have some data array like :

arr = [

{"name": "John", "age": 17, "brothers":[{"name":"steve"},{"name":"james"},"name":"robert","name":"juzu"],
{"name": "Doe", "age": 18, "brothers":[{"name":"kelly"},{"name":"smith"}, "name":"herry"],
{"name": "John Doe", "age": 19, "brothers":[{"name":"old"},{"name":"sch"}, {"name":"Jee"},{"name":"hero"},{"name":"tony"}],

];

i want to create table like :

but, my td for showing brothers.name limit to 2. and if my borthers.name data > 2, my arr.name rowspan add +1

@JehanRamadhan why wouldn't you start a fiddle or plunker instead of expecting others to do it for you? This isn't a free coding service. The more effort you put in, the more help you will get — charlietfl
– charlietfl, Commented Feb 2, 2017 at 1:05

Abel · Accepted Answer · 2019-05-04 16:36:21Z

Without any modification of your data you could use the Math operations, but try another way to show the data like modals or inner tables for each parent data

HTML

<div ng-controller="MyCtrl">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th colspan="2">Brothers</th>
            </tr>
        </thead>
        <tbody>
            <tr style="display: none"  ng-repeat-start="(k1, v1) in data"></tr>
            <tr>
                <td rowspan="{{ Math.ceil(v1.brothers.length/2) }}">{{v1.name}}</td>
                <td>{{v1.brothers[0].name  }}</td>
                <td>{{v1.brothers[1].name  }}</td>
            </tr>
            <tr ng-repeat="(k2, v2) in calcData(v1.brothers)">
                <td>{{v1.brothers[v2].name || '' }}</td>
                <td>{{v1.brothers[v2+1].name || ''}}</td>
            </tr>
            <tr style="display: none" ng-repeat-end></tr>
        </tbody>
    </table>
</div>

JavaScript

angular.module('App', []);
angular.module('App').controller('MyCtrl', function($scope) {
    $scope.Math = window.Math;
    $scope.data = [{
        "name": "John",
        "age": 17,
        "brothers": [{ "name": "steve" }, { "name": "james" }, { "name": "robert" }, { "name": "juzu" }]
    }, {
        "name": "Doe",
        "age": 18,
        "brothers": [{ "name": "kelly" }, { "name": "smith" }, { "name": "herry" }]
    }, {
        "name": "John Doe",
        "age": 19,
        "brothers": [{ "name": "old" }, { "name": "sch" }, { "name": "Jee" }, { "name": "hero" }, { "name": "tony" }]
    }
    ];
    $scope.calcData = function (data) {
        var tempData = angular.copy(data);
        var temp = [];
        for (var i = 0; i <= Math.ceil(tempData.slice(2, data.length).length/2); i++) {
            if (i%2==0) {
                temp.push(i+2)
            }
        }
        return temp;
    }
});

Output

Collectives™ on Stack Overflow

AngularJS ng-repeat dynamic rowspan

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related