1

I am making a table that is auto populated via database and using angular to loop through a list to populate the html table. My issue is that I would like to make it so onclick a cell it would open up a new webpage with a more specific quarry relating to that jobID.

Not my question is how do I get the values from a html table through javascript. I think i can make everything else happen if I can click on the cell I want and put the jobID into a var.

<div align=center>
    <img src = "./img/heatmap.png"></img>   
</div>
<div align=center>
    Job ID:<input type="text" name="jobID" id="jobID"><br><br>
</div>
    <div align=center>
            <table id="Table" class="JobID-table" style="text-align:center" >
                <tr class="table-Header">
                    <th>JOB ID</th>
                    <th>TIME FOR ALL MODULES(MILLISECONDS)</th> 
                 </tr>
                 <tr class="jobID-Table-tr" ng-repeat="p in puller | orderBy : '-modCount'"> 

                        <td ng-click='someFunctionName(p.modName)'class={{p.cellClass}}>
                            {{p.modName}}   
                        </td>
                        <td  class={{p.cellClass}}>

                            {{p.modCount}}

                        </td>


                 </tr>

            </table> 
        </div>  
    <script src = "js/vendor/angular.js"></script>
    <script src = "js/app.js"></script>
    <script src = "js/home-controller.js"></script>

This is the controller:

app.controller("homectrl", function($scope, $http){

    $http.get("rest/performance").then(function(response){

        $scope.puller = response.data;

        for (var i = 0; i < $scope.puller.length; i++) {
            var p = $scope.puller[i];
            console.log("modName: " + p.modName);
            console.log("modClass: " + p.cellClass);
            console.log("modData: " + p.modCount);

        }

        $scope.someFunctionName(cellVal){
            document.getElementById("jobID").value = cellval;

        }

    });


});
C.Ward
  • 85
  • 7
  • What problem are you having? Are you getting an error? – Ryan Wilson Nov 28 '18 at 17:08
  • 1
    You shouldn't be using vanilla js `onclick`. Instead use angularJS' [`ngClick`](https://docs.angularjs.org/api/ng/directive/ngClick). Can you post the controller code? – ibrahim mahrir Nov 28 '18 at 17:14
  • BTW, your code has this [**error**](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). Using `ngClick` will fix that error and make your code better. – ibrahim mahrir Nov 28 '18 at 17:17

1 Answers1

3

You may like to explore ng-click

<td ng-click='someFunctionName(p.modName)'class={{p.cellClass}}>{{p.modName}}</td>
<td ng-click= class={{p.cellClass}}>{{p.modCount}}</td>

In the controller 

$scope.someFunctionName(cellVal){
  // cellValue gives the content of the cell

}
brk
  • 48,835
  • 10
  • 56
  • 78
  • Brk, I am getting unexpected token for the { curly brace. I updated my code. – C.Ward Nov 28 '18 at 18:05
  • may be because of this `class={{p.cellClass}}`. Try by putting inside quotes and without `{{` & `}}` – brk Nov 28 '18 at 18:06
  • Same error looks like: home-controller.js:14 Uncaught SyntaxError: Unexpected token { angular.js:14642 Error: [$controller:ctrlreg] The controller with the name 'homectrl' is not registered. http://errors.angularjs.org/1.6.5/$controller/ctrlreg?p0=homectrl at angular.js:116 at $controller (angular.js:10933) at setupControllers (angular.js:10025) at nodeLinkFn (angular.js:9795) at compositeLinkFn (angular.js:9149) ect ect... – C.Ward Nov 28 '18 at 18:29