AngularJS：绑定值

Question

我做与实时更新的仪表板指定默认值，所以当一个DB返回$ HTTP调用空对象后，我想指定默认值为零

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

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

如果SAP没有响应数据，我需要在所有SAP绑定中显示0，即使我将0赋给$ scope.SAP，它也不会在html中反映。我知道这可能与NG隐藏来实现与另一<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 

我想你可以尝试不是指定$scope.SAP = 0这

Answer 2

，您可以指定

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

或任何默认值。

Answer 3

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

您可以使用数字过滤器，它会为您提供,分隔格式。

{{SAP.red | number}} 

Sample Demo