I am attempting to create a reload data button. Here is the JSON structure I am working with:
[
{
"name": "AAAAAA",
"data": "False"
},
{
"name": "BBBBBB",
"data": "45%"
},
{
"name": "CCCCC",
"data": "12%"
}
]
This is the JavaScript code I am using:
app.service('service', function($http, $q) {
var deferred = $q.defer();
$http.get('names.json').then(function(data) {
deferred.resolve(data);
});
this.getNames = function() {
return deferred.promise;
}
});
app.controller('FirstCtrl', function($scope, service, $http) {
var vm = this;
vm.reloadData = function() {
console.log("reloading");
vm.loadData();
};
vm.loadData = function() {
var promise = service.getNames();
promise.then(function(data) {
$scope.names = data.data;
console.log($scope.names);
});
}
vm.loadData();
});
Here is my HTML code:
<div ng-controller="FirstCtrl as vm">
<table>
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.data}}</td>
</tr>
</tbody>
</table>
<button ng-click="vm.reloadData()">Reload</button>
</div>
When I click the "Reload" button using the function "vm.reloadData()", nothing happens and my data does not refresh. Any help would be greatly appreciated.