CODEWITHSUNDEEP
javascriptangularjsprogress-barangularjs-ng-repeat
forgottofly
forgottofly

Reputation: 2719

Bind dynamic values to progress bar inside ng-repeat

I'm having an angular progress bar inside ng-repeat

<div ng-repeat="item in result">
   <progressbar  animate="false" value="item.status" type="success"><b>{{item.status}}%</b></progressbar></div>

But I'm getting result variable as 

 $scope.result=[
    {
        id: 0,
        name: "Abc",
        status: "InProgress"
    },
    {
        id: 0,
        name: "Abc",
        status: "InHold"
    }
]

How can I assign a particular number to the variable "value " inside progress bar depending upon my JSON data(status). ie., if status is InProgress value can be 30. Simply I want value conditionally based on the status.

Any help will really be appreciated.Thanks

Upvotes: 1

Views: 2620

Answers (1)

Jay Shukla
Jay Shukla

Reputation: 5826

You can write one more function which returns value based on status.

Like this

HTML

<div ng-repeat="item in result">
   <progressbar  animate="false" value="getStatusValue(item.status)" type="success"><b>{{item.status}}%</b></progressbar></div>

JS

$scope.result=[
    {
        id: 0,
        name: "Abc",
        status: "InProgress"
    },
    {
        id: 0,
        name: "Abc",
        status: "InHold"
    }
]

$scope.getStatusValue(st) {
     if(st == "InProgress") {
          return 30;
     }
     else if(st == "InHold") {
          return 10;
     }
}

It will work.

Upvotes: 1

Related Questions