locked
Build table in angularjs RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have this markup:

     table: {
                       
                         columns: [
                             {
                                 header: "Col 1",
                                 rows: [
                                     1,2,3
                                 ]
                             },
                            {
                                header: "Col 2",
                                rows: [
                                    4,5,6
                                ]
                            },
                            {
                                header: "Col 3",
                                rows: [
                                    7,8,9
                                ]
                            }
                         ]
                     }

    I would like to use angularjs to build a table like this:

     <table class="table table-condensed table-bordered">
                                <thead>
                                    <tr>
                                        <th data-ng-repeat="col in table.columns">{{col.header}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-ng-repeat="col in table.columns">
                                        <td data-ng-repeat="row in col.rows">{{row}}</td>
                                    </tr>
                                </tbody>
                            </table>

    However, the result I got is like this:

    Col 1       Col 2       Col 3

    1                  2            3

    4                  5            6

    7                  8            9

    I want something like this: 

    Col 1       Col 2       Col 3

    1                  4            7

    2                  5            8

    3                  6            9

    I put the number there just as an example. Any kind of data can be there so I can't change my data just to get the kind of result I want. I want each column to display the data in its original array.

    Thanks

    Sunday, September 2, 2018 11:07 PM

Answers

  • User283571144 posted

    Hi asplearning ,

    I suggest you could try below codes:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    
        <div ng-app="myApp" ng-controller="customersCtrl">
    
            <table class="table table-condensed table-bordered">
                <thead>
                    <tr>
                        <th data-ng-repeat="col in table.columns">{{col.header}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="col in table.columns[1].rows">
                        <td data-ng-repeat="col in table.columns">{{col.rows[$parent.$index]}}</td>
                    </tr>
                </tbody>
            </table>
    
        </div>
    
        <script>
    var app = angular.module('myApp', []);
            app.controller('customersCtrl', function ($scope, $http) {
                $scope.table = {
                    columns: [
                        {
                            header: "Col 1",
                            rows: [
                                1, 2, 3
                            ]
                        },
                        {
                            header: "Col 2",
                            rows: [
                                4, 5, 6 
                            ]
                        } 
                    ]
                }
            });
        </script>
    
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 11, 2018 9:27 AM

All replies

  • User2108892867 posted

    Anybody please? Thanks

    Monday, September 3, 2018 9:10 PM
  • User283571144 posted

    Hi asplearning,

    According to your description, I suggest you could get the data-ng-repeat index to achieve your requirement.

    More details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    
        <div ng-app="myApp" ng-controller="customersCtrl">
    
            <table class="table table-condensed table-bordered">
                <thead>
                    <tr>
                        <th data-ng-repeat="col in table.columns">{{col.header}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="col in table.columns">
                        <td data-ng-repeat="col in table.columns">{{col.rows[$parent.$index]}}</td>
                    </tr>
                </tbody>
            </table>
    
        </div>
    
        <script>
    var app = angular.module('myApp', []);
            app.controller('customersCtrl', function ($scope, $http) {
                $scope.table = {
                    columns: [
                        {
                            header: "Col 1",
                            rows: [
                                1, 2, 3
                            ]
                        },
                        {
                            header: "Col 2",
                            rows: [
                                4, 5, 6
                            ]
                        },
                        {
                            header: "Col 3",
                            rows: [
                                7, 8, 9
                            ]
                        }
                    ]
                }
            });
        </script>
    
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    Tuesday, September 4, 2018 3:20 AM
  • User2108892867 posted

    Thank you Brando for your code. That's very helpful. But I ran into one more issue. I have this mark up to remove the columns if the user wants to do it.

      <ul>
        <li data-ng-repeat="col in table.columns">
    <input class="text" type="text" data-ng-model="col.header"> <a class="btn-small btn-danger" data-ng-click="table.removeColumn(col)"> </a> </li> </ul>

    When I removed it, this ng-repeat looped only twice. As a result I got the result like this if I removed Col 3:

    Col 1       Col 2       

    1                  4          

    2                  5          

    I want it to be 

    Col 1       Col 2       

    1                  4            

    2                  5            

    3                  6            

    Thanks

    Thursday, September 6, 2018 9:58 PM
  • User2108892867 posted

    Brando, I don't mind if I need to change the structure of the data set above if you think there is a better way to handle this. 

    Again thanks

    Thursday, September 6, 2018 10:03 PM
  • User283571144 posted

    Hi asplearning ,

    I suggest you could try below codes:

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    
        <div ng-app="myApp" ng-controller="customersCtrl">
    
            <table class="table table-condensed table-bordered">
                <thead>
                    <tr>
                        <th data-ng-repeat="col in table.columns">{{col.header}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="col in table.columns[1].rows">
                        <td data-ng-repeat="col in table.columns">{{col.rows[$parent.$index]}}</td>
                    </tr>
                </tbody>
            </table>
    
        </div>
    
        <script>
    var app = angular.module('myApp', []);
            app.controller('customersCtrl', function ($scope, $http) {
                $scope.table = {
                    columns: [
                        {
                            header: "Col 1",
                            rows: [
                                1, 2, 3
                            ]
                        },
                        {
                            header: "Col 2",
                            rows: [
                                4, 5, 6 
                            ]
                        } 
                    ]
                }
            });
        </script>
    
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 11, 2018 9:27 AM
  • User2108892867 posted

    Thank you very much. That's just what I needed. I used table.columns[0] by the way. 

    Wednesday, September 12, 2018 4:45 AM