how to update the data of an html table in angularjs?

Question

I have this table;

     <table class="table table-striped table-bordered table-responsive" ng-show="viewBusinessUnits">
      <thead>
        <tr>
          <th>Business Unit</th>
          <th><input type="checkbox" ng-model="businessUnitSales">Sales</input></th>
          <th><input type="checkbox" ng-model="businessUnitPercentageLY">Percentage Last Year</input></th>
          <th><input type="checkbox" ng-model="businessUnitWTD">WTD Percentage Last Year</input></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in tableData">
          <td><a href="#" ng-click="toggleTable(row.name)">{{row.name}}</a></td><!---->
          <td>{{row.Actual}}</td>
          <td>{{row.Budget}}</td>
          <td>{{row.BudgetVar}}</td>
        </tr>
      </tbody>
    <table>

that is drawn with the correct data and everything when the page loads, but I've declared a click listener for a flot chart in the controller, that I want to use to change the data displayed in the table, depending on which bar/point on the graph is clicked;

    $("#graph_canvas").bind("plotclick", function (event, pos, item) {

      if(item){
        switch(item.series.data[item.dataIndex][0]){
          case 'airtime':
            $scope.tableData = $scope.airtimeData;
            break;

          case 'clothing':
            $scope.tableData = $scope.clothing;
            break;

          case 'foods':
            $scope.tableData = $scope.foods;
            break;
        }

        alert("1st item: " + $scope.tableData[0].name);
      }
    });

now that alert at the end of the plotclick listener, tells me that $scope.tableData was definitely updated, but the data shown in the html table remains the same, usually in angularjs, by adding a row to an array used in a select element, the select element is updated immediately with an extra option, howcome it doesn't work when I replace this entire table, is the an explanation or a way I can re-render the table after changing the data?

if you are using Jquery 1.7 or beyond, then use .on() instead of .bind(), always be updated with the library or framework being used :) — dreamweiver
– dreamweiver, Commented Nov 20, 2013 at 11:36

AlwaysALearner · Accepted Answer · 2013-11-20 11:32:40Z

3

Angular does not know about the model updates that take place inside click. Use $apply:

$("#graph_canvas").bind("plotclick", function (event, pos, item) {
    $scope.$apply(function(){
        if(item){
            switch(item.series.data[item.dataIndex][0]){
                case 'airtime':
                    $scope.tableData = $scope.airtimeData;
                    break;
                case 'clothing':
                    $scope.tableData = $scope.clothing;
                    break;
                case 'foods':
                    $scope.tableData = $scope.foods;
                    break;
            }
            alert("1st item: " + $scope.tableData[0].name);
        }
    });
});

answered Nov 20, 2013 at 11:32

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

1 Comment

pythonian29033 Over a year ago

thanks again! will try this out quickly and get back to you. . . .nice!

Collectives™ on Stack Overflow

how to update the data of an html table in angularjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related