Loading Bar in table Angular

Question

Hello here's my json :

[
    {
        "name": "AAAAAA",
        "loading": "False",
    },
    {
        "name": "BBBBBB",
        "loading": "45%",
    },
    {
        "name": "CCCCCC",
        "loading": "12%",
    },
    {
        "name": "DDDDDD",
        "loading": "False",
    }
]

My javascript :

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);
        }
    );

HTML :

<tbody>
    <tr ng-repeat="name in names">
        <td>{{name.name}}</td>
        <td>{{name.loading}}</td>
    </tr>
</tbody>

What i try to do is loading bar for name.loading %. I get it from server, and the % is loading for something, so it still load (ex. in first second 15%, in second 25%...), and when its 100% name.loading = "False". I need loading bar in the table name.loading, only when its %, when its "False", in table should be just "False". Thanks in advance

Answer 1

You can use ngIf directive to achieve that.

<tbody>
    <tr ng-repeat="name in names">
        <td>{{name.name}}</td>
        <td ng-if="name.loading !== 'False'">{{name.loading}}</td>
    </tr>
</tbody>

Answer 2

You can use progress in html5.

Edit your code like below.

<td><progress value="{{name.loading}}" max="100" ng-if="name.loading != 'False'">{{name.loading}} %</progress></td>