locked
Find out which cell is selected angular js RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, this is continuation of my attempt to build table dynamically using angular js. Please refer to part 1 in this link https://forums.asp.net/t/2146369.aspx?Build+table+in+angularjs

    <!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-class="{'cell-selected' : cell.isSelected == true}" data-ng-repeat="col in table.columns" data-ng-click="selectCell(col, $parent.$index)">{{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 
                            ]
                        } 
                    ]
                }
    $scope.selectCell = function (col, index){
    //not sure how to implement this function
    }
    }); </script> </body> </html>

    I am not sure how to implement the select cell function. What I need when the cell is clicked is to know which cell belonging to which column is selected. Then I can update that cell's isSelected property to true. Also I will insert html element such as a label into that cell. 

    Thanks. 

    Wednesday, September 26, 2018 2:52 AM

Answers

  • User61956409 posted

    Hi asplearning,

    would it be possible to not use the col header because I also allowed the user to change the col header to anything they like.

    You can pass the index of current column to the function, the following sample code should help you achieve your requirement.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
        <style>
            .cell-selected{
                background-color:red;
            }
        </style>
    </head>
    <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-class="{'cell-selected' : is_selected($index, $parent.$index)}" data-ng-repeat="col in table.columns" data-ng-click="selectCell($index, $parent.$index)">{{col.rows[$parent.$index]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    <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
                        ]
                    }
                ]
            };
    
            $scope.selected_cell = { "rowIndex": null, "colIndex": null };
           
    
            $scope.selectCell = function (col_index, row_index) {
                //not sure how to implement this function
    
                $scope.selected_cell.colIndex = col_index;
                $scope.selected_cell.rowIndex = row_index;
            }
    
            $scope.is_selected = function (col_index, row_index) {
                if (col_index == $scope.selected_cell.colIndex && row_index == $scope.selected_cell.rowIndex) {
                    return true;
                }
    
                return false;
            };
    
        });
    </script>

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 27, 2018 2:57 AM

All replies

  • User61956409 posted

    Hi asplearning,

    What I need when the cell is clicked is to know which cell belonging to which column is selected. Then I can update that cell's isSelected property to true. Also I will insert html element such as a label into that cell. 

    You can refer to the following working sample to achieve the requirement: setting the cell as selected when the cell is clicked.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
        <style>
            .cell-selected{
                background-color:red;
            }
        </style>
    </head>
    <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-class="{'cell-selected' : is_selected(col, $parent.$index)}" data-ng-repeat="col in table.columns" data-ng-click="selectCell(col, $parent.$index)">{{col.rows[$parent.$index]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    <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
                        ]
                    }
                ]
            };
    
            $scope.selected_cell = { "row": null, "col_name": "" };
           
    
            $scope.selectCell = function (col, index) {
                //not sure how to implement this function
    
                $scope.selected_cell.col_name = col.header;
                $scope.selected_cell.row = index;
            }
    
            $scope.is_selected = function (col, rowindex) {
                if (col.header == $scope.selected_cell.col_name && rowindex == $scope.selected_cell.row) {
                    return true;
                }
    
                return false;
            };
    
        });
    </script>

    Test Result:

    With Regards,

    Fei Han

    Thursday, September 27, 2018 2:27 AM
  • User2108892867 posted

    Thank you very much. That's helpful. But would it be possible to not use the col header because I also allowed the user to change the col header to anything they like. So it's possible that more than 1 column can have the same header.

    Thursday, September 27, 2018 2:32 AM
  • User61956409 posted

    Hi asplearning,

    would it be possible to not use the col header because I also allowed the user to change the col header to anything they like.

    You can pass the index of current column to the function, the following sample code should help you achieve your requirement.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
        <style>
            .cell-selected{
                background-color:red;
            }
        </style>
    </head>
    <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-class="{'cell-selected' : is_selected($index, $parent.$index)}" data-ng-repeat="col in table.columns" data-ng-click="selectCell($index, $parent.$index)">{{col.rows[$parent.$index]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    <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
                        ]
                    }
                ]
            };
    
            $scope.selected_cell = { "rowIndex": null, "colIndex": null };
           
    
            $scope.selectCell = function (col_index, row_index) {
                //not sure how to implement this function
    
                $scope.selected_cell.colIndex = col_index;
                $scope.selected_cell.rowIndex = row_index;
            }
    
            $scope.is_selected = function (col_index, row_index) {
                if (col_index == $scope.selected_cell.colIndex && row_index == $scope.selected_cell.rowIndex) {
                    return true;
                }
    
                return false;
            };
    
        });
    </script>

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 27, 2018 2:57 AM