2017-07-28 85 views
0

我在AngularJS視圖中遇到問題。我有一些價值,如果條件,我想計算他們的總和。如果條件成立,但是在條件成立之後進行了,但是出現了一些問題,並且顯示出結果爲NaN。 這是我的代碼。AngularJS與if條件之和的總和

<div ng-if = "nnn == 'yes'"> 
<h3>Sale Roakker (Naam)</h3> 
<div class="card-content table-responsive"> 
    <table class="table table-bordered pagin-table"> 
     <thead> 
      <tr> 
       <th>Date</th> 
       <th>Name</th> 
       <th>Item Name</th> 
       <th>Total</th>     
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in sales_items_detail"> 
       <td>{{ x.date }}</td> 
       <td>{{ x.name }}</td> 
       <td>{{ x.item_name }}</td> 
       <td>{{ (x.amount).toFixed(2) }}</td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="2"><strong>Total</strong></td> 
       <td><strong>{{amount_sale = amountTotal(sales_items_detail)}}</strong></td> 
       </tr>        
     </tfoot> 
    </table>       
</div> 
</div> 
<div ng-if = "nnn == 'not'"> 
<h3>Sale Roakker (Naam)</h3> 
<div class="card-content table-responsive"> 
    <table class="table table-bordered pagin-table"> 
     <thead> 
      <tr> 
       <th>Date</th> 
       <th>Name</th> 
       <th>Item Name</th> 
       <th>Rate</th> 
       <th>Weight</th> 
       <th>Total</th>     
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in sales_items_detail"> 
       <td>{{ x.date }}</td> 
       <td>{{ x.name }}</td> 
       <td>{{ x.item_name }}</td> 
       <td>{{ x.price }}</td> 
       <td>{{ x.quantity }}</td> 
       <td>{{ x.price*x.quantity }}</td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="4"><strong>Total</strong></td> 
       <td><strong>{{amount_sale = saleTotal(sales_items_detail)}}</strong></td> 
       </tr>        
     </tfoot> 
    </table>       
</div> 
</div> 
<h3>Naqdi Roakker Jama</h3> 
<div class="card-content table-responsive"> 
    <table class="table table-bordered pagin-table"> 
     <thead> 
      <tr> 
       <th>Date</th> 
       <th>Name</th> 
       <th>Detail</th> 
       <th>Amount</th>     
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in transection_detail_jama"> 
       <td>{{ x.date }}</td> 
       <td>{{ x.name }}</td> 
       <td>{{ x.detail }}</td> 
       <td>{{ x.amount }}</td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="2"><strong>Total</strong></td> 
       <td><strong>{{amount_jama = amountTotal(transection_detail_jama)}}</strong></td> 
       </tr>    
     </tfoot> 
    </table>       
</div> 
<h3>Naqdi Roakker Naam</h3> 
<div class="card-content table-responsive"> 
    <table class="table table-bordered pagin-table"> 
     <thead> 
      <tr> 
       <th>Date</th> 
       <th>Name</th> 
       <th>Detail</th> 
       <th>Amount</th>     
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in transection_detail_naam"> 
       <td>{{ x.date }}</td> 
       <td>{{ x.name }}</td> 
       <td>{{ x.detail }}</td> 
       <td>{{ x.amount }}</td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="2"><strong>Total</strong></td> 
       <td><strong>{{ amount_naam = amountTotal(transection_detail_naam)}}</strong></td> 
       </tr>    
     </tfoot> 
    </table>       
</div> 
total = {{(parseFloat(amount_sale) + parseFloat(amount_naam)) - (parseFloat(amount_jama)) }} 

如果我刪除條件,那麼它工作正常,但如果條件它不工作,並顯示NaN。 我想這裏是一個相同的變量名稱amount_sale的問題。 如果可以,請幫助我。提前致謝。

+0

嘗試更改ng-if to ng-show – Vivz

回答

0

AngularJs不分配值,這樣的變量將直接顯示什麼將通過amountTotal(sales_items_detail)函數返回

{{amount_sale = amountTotal(sales_items_detail)}} 

您應該添加所有這些代碼邏輯控制器,並且只使用所得到的在雙括號可變 看到這個例子

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 

 
<div ng-if="obj">{{val = "wow"}}</div> 
 
<div ng-if="obj">{{val = "how"}}</div> 
 
<div>{{val}}</div> 
 

 

 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.obj = true; 
 
    $scope.val ="ok"; 
 
}); 
 
</script> 
 

 
</body> 
 
</html>