CODEWITHSUNDEEP
javascriptjqueryangularjs
Minh
Minh

Reputation: 25

How to get <td> values that comes dynamically to table from angularjs scope?

I tried to get the values from the table while loading so that based on data value I can set the background color as an indication on my Dashboard. But am not to access the values can anyone help me. Thank you.

HTML

<div class="row">
      <div id="content1" class="toggle" style="display:none">
        <div class="col-sm-8">
          <div class="well">
            <table id="table1" class="table table-hover" ng-show="mytable1">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Operational Analysis</th>
                            <th></th>
                            <th></th>
                            <th ng-repeat="item in yearList">{{item.years}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="operation in dataOperationList">
                            <td class="details-control"></td>
                            <td>{{operation.reportTypeDetail}}</td>
                            <td>{{operation.reportFormula}}</td>
                            <td>{{operation.reportRang}}</td>
                            <td>{{operation.year5}}</td>
                            <td>{{operation.year4}}</td>
                            <td>{{operation.year3}}</td>
                            <td>{{operation.year2}}</td>

                        </tr>
                    </tbody>
            </table>
          </div>
        </div>

I tried by jQuery

$(document).ready(function(){
    $("#table1 tbody tr").each(function() {
          // Within tr we find the last td child element and get content
          alert($(this).find("td:last-child").html());

    });
});

but it didnt work.

Upvotes: 0

Views: 1636

Answers (2)

Akli B
Akli B

Reputation: 1

Here is the correction, you can test it here : https://jsfiddle.net/abec/6f47jepq/4/

HTML part :

<body ng-app="operationApp" onload="showTableValue()">
  <div class="row" ng-controller="operationController">
    <div id="content1" class="toggle" style="display:none">
      <div class="col-sm-8">
        <div class="well">
          <table id="table1" class="table table-hover" ng-show="mytable1">
            <thead>
              <tr>
                <th></th>
                <th>Operational Analysis</th>
                <th></th>
                <th></th>
                <th ng-repeat="item in yearList">{{item.years}}</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="operation in dataOperationList">
                <td class="details-control"></td>
                <td>{{operation.reportTypeDetail}}</td>
                <td>{{operation.reportFormula}}</td>
                <td>{{operation.reportRang}}</td>
                <td>{{operation.year5}}</td>
                <td>{{operation.year4}}</td>
                <td>{{operation.year3}}</td>
                <td>{{operation.year2}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showTableValue() {
      var tbl = document.getElementById('table1');
      if (tbl != null) {
        for (var j = 1; j < tbl.rows[1].cells.length; j++)
          alert(tbl.rows[1].cells[j].innerHTML);
      }
    }

  </script>
</body>

JS part :

var module = angular.module("operationApp", []);

module.controller("operationController", function($scope) {
  $scope.mytable1 = true;
  $scope.yearList = [{
    "years": "2000,2001,2002,2003,2004"
  }]
  $scope.dataOperationList = [{
      "reportTypeDetail": "Report type details 1",
      "reportFormula": "Report Formula 1",
      "reportRang": "Report Rang 1",
      "year2": 1002,
      "year3": 1003,
      "year4": 1004,
      "year5": 1005
    },
    {
      "reportTypeDetail": "Report type details 2",
      "reportFormula": "Report Formula 2",
      "reportRang": "Report Rang 2",
      "year2": 2002,
      "year3": 2003,
      "year4": 2004,
      "year5": 2005
    }
  ];
});

Upvotes: 0

Okba
Okba

Reputation: 783

You can simply use ngClass directive, it allows you to dynamically add CSS classes to an element. https://docs.angularjs.org/api/ng/directive/ngClass

For example if you want to add a green background the a td element if it has 2019 as a content, first you should define a CSS class :

.green{ backgroud: green; }

Then, use the ngClass directive on the td element :

<td ng-class="{green: (operation.year2 == '2019')}">{{operation.year2}}</td>

Update :

You can also use ngStyle directive if want to get the color from a variable:

<td ng-style="{background: (operation.year2 == '2019')? colorValue : defaultColor}">{{operation.year2}}</td>

colorValue and defaultColor sould be defined somewhere.

Upvotes: 1

Related Questions