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

Question

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.

Don't mix jQuery and Angular like this. Let angular control the background color based on the same data that's already in its scope, instead of trying to read data back from the DOM. — Daniel Beck
– Daniel Beck, Commented Apr 19, 2019 at 13:18
okay but can u show me sample code how to set the background color according to my data #Daniel Beck — Minh
– Minh, Commented Apr 19, 2019 at 13:25

Okba · Accepted Answer · 2019-04-19 13:43:45Z

1

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.

edited Apr 19, 2019 at 13:43

answered Apr 19, 2019 at 13:06

Okba

7936 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Minh Over a year ago

okay but I do not want static color bcoz my values will be changing time to time

Okba Over a year ago

You can use ngStyle directive in this case, just updated my answer.

Akli B · Accepted Answer · 2019-04-19 13:44:30Z

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
    }
  ];
});

Actually is required to be none so that when I click on <a> tag it will be displayed

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related