AngularJS:为绑定值分配默认值

Question

我正在使用实时更新执行仪表板，因此在$http调用之后，当db返回空对象时，我希望将默认值赋值为零。

​

 $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>

​

如果SAP不在响应数据中，我需要在所有SAP绑定中显示0，即使我将0分配给$scope.SAP，它也不会在html中反映。我知道可以用另一个<p>标记来隐藏，但是最简单的解决方案是什么？

Answer 1

<!-- 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

我想你可以试试这个

Answer 2

确保您的html应该在控制器的上下文中，在其中获取数据并分配给$scope.SAP。

您可以在那里使用数字筛选器，这将为您提供,分隔格式。

{{SAP.red | number}}

Sample Demo

Answer 3

而不是分配$scope.SAP = 0，您可以分配

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

或者任何默认值。