AngularJS: Assign default value for binding value

Question

I am doing a dashboard with live update, so after $http call when a db returns null object i want to assign default value as zero

 $scope.SAP=0;
$http({
			method: 'GET',
            url: 'getTilesDataForPrjectReport.do',
		}).then(function(response){
				 if(response.data.proj==='SAP'){
					$scope.SAP=response.data;
				}
			 }
		});

<div style="height:20%; background-color:#ff9e97;">
	<p id="colorPalletDashboardTileRed"> {{SAP.red}}</p>
	<p id="colorPalletDashboardTileAmber">{{SAP.amber}}</p>
	<p id="colorPalletDashboardTileGreen">{{SAP.green}}</p>
	</div>
	<div style="height:18%; background-color:#ff8a81;">
	<p> Total Projects : {{SAP.totalProj}} </p>
	</div>

If SAP is not in response data, i need to display 0 in all SAP bindings, even if i assign 0 to $scope.SAP, it's not reflecting in html. I know it could be done with ng-hide with another <p> tag, but what's the simplest solution

could you paste your json response here?

Pankaj Parkar
– Pankaj Parkar

2016-01-21 07:00:11 +00:00
Commented Jan 21, 2016 at 7:00 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 21, 2016 at 7:00

saikumar · Accepted Answer · 2016-01-21 07:00:46Z

<!-- language: lang-js -->

    <div style="height:20%; background-color:#ff9e97;">
        <p id="colorPalletDashboardTileRed"> {{SAP.red || 0}}</p>
        <p id="colorPalletDashboardTileAmber">{{SAP.amber || 0}}</p>
        <p id="colorPalletDashboardTileGreen">{{SAP.green || 0}}</p>
        </div>
        <div style="height:18%; background-color:#ff8a81;">
        <p> Total Projects : {{SAP.totalProj || 0}} </p>
        </div>
     (or)
 //define $scope.default = 0;
<div style="height:20%; background-color:#ff9e97;">
        <p id="colorPalletDashboardTileRed"> {{SAP.red || default}}</p>
        <p id="colorPalletDashboardTileAmber">{{SAP.amber || default}}</p>
        <p id="colorPalletDashboardTileGreen">{{SAP.green || default}}</p>
        </div>
        <div style="height:18%; background-color:#ff8a81;">
        <p> Total Projects : {{SAP.totalProj || default }} </p>
        </div>

<!-- end snippet -->

I think, you can try this
or

I think you can try this

Pankaj Parkar · Accepted Answer · 2016-01-21 20:52:24Z

1

Make sure your html should be under the context of controller, where you are fetching a data and assigning to $scope.SAP.

You could use number filter there which will provide you , separated formatting too.

{{SAP.red | number}}

Sample Demo

edited Jan 21, 2016 at 20:52

answered Jan 21, 2016 at 6:57

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Vignesh Rajarajan Over a year ago

not working..i guess you need to use double pipe like below answer

Pankaj Parkar Over a year ago

@VigneshRajarajan || means OR, | means filter

Narendra CM · Accepted Answer · 2016-01-21 06:55:37Z

0

Instead of assigning $scope.SAP = 0, you can assign

$scope.SAP = {"red": 0, "amber": 0, "green": 0, "totalProj": 0}

or any default value.

answered Jan 21, 2016 at 6:55

Narendra CM

1,4263 gold badges13 silver badges23 bronze badges

1 Comment

Vignesh Rajarajan Over a year ago

when the number of scope objects and it's properties increase in future, it will be hard to do it. anyway thanks

Collectives™ on Stack Overflow

AngularJS: Assign default value for binding value

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related