Hey there, here's the JSON data I have:
[
{
"name": "AAAAAA",
"loading": "False",
},
{
"name": "BBBBBB",
"loading": "45%",
},
{
"name": "CCCCCC",
"loading": "12%",
},
{
"name": "DDDDDD",
"loading": "False",
}
]
This is my JavaScript code:
var app = angular.module('app', []);
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 promise = service.getNames();
promise.then(function (data) {
$scope.names = data.data;
console.log($scope.names);
}
);
In HTML, it looks like this:
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.loading}}</td>
</tr>
</tbody>
The goal is to create a loading bar for the "loading" percentage. The value is retrieved from the server and represents the progress of something being loaded. The percentage increases over time until it reaches 100%, then it changes to "False". When the value is in percentage form, display a loading bar in the table cell; when it's "False", simply show "False" in the table. Appreciate any help on this matter. Thanks!