Utilizing Angular, I am populating a table with data that is loaded asynchronously from JSON using $http. There is also a date-picker feature which, when a new date is selected, should display the data for that specific date. However, even though the new data is successfully loaded, the view does not refresh. Here is an abridged version of my code:
<tbody>
<tr ng-repeat="row in tableKPI">
<td ng-repeat="index in tableKPIColsInt">{{ row[index]}}</td>
<td ng-repeat="index in tableKPIColsFloat">{{ row[index] | number:2}}</td>
</tr>
</tbody>
In this code snippet, tableKPIColsInt and Float are simply lists of strings containing column names.
loadDailyDataFromJSON = function ($plantName,$http,$scope,$timeout) {
var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd");
$http.get("json/"+formattedDate+".json")
.then(function (response) {
$scope.tableKPI = response.data[$plantName];
},
function(error) {
$scope.tableKPI = {};
console.log("No data for KPI for "+formattedDate);
});
// Attempted to use $apply as well
$timeout(function() { $scope.$apply();}, 500);
};
Below is the controller:
app.controller("tableController", function($scope,$routeParams,$rootScope,$http,$timeout){
$scope.tableKPI = {};
$scope.reloadData = function(){
loadDailyDataFromJSON($rootScope.currentPlant, $http, $scope, $timeout);
};
}
The issue arises after the initial page load - subsequent changes to the date result in the correct loading of new data, but the view does not update accordingly. Attempts to resolve this through $scope.$apply() or calling $apply() after a timeout have proven unsuccessful, yielding errors such as "digest already in progress...". Even structuring the code differently by moving the function elsewhere did not solve the problem.
It is possible that the issue lies within the model itself. The nested loops and iteration over rows and string indexes may be causing complications. Including the code below while specifying the controller has not resulted in any changes:
<tbody ng-controller="dailyCtrl as dc">
<tr ng-repeat="row in dc.tableImbalance">
<td ng-model="row[index]" ng-repeat="index in dc.tableImbalanceCols" ng-bind-html="row[index].toString()"></td>
</tr>
</tbody>