Reputation: 5207
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?
Upvotes: 1
Views: 2272
Reputation: 43957
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);
}
});
});
Upvotes: 3