2017-07-28 72 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>