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