加減在angularjs視圖

Question

http://jsfiddle.net/4v2jaaxh/

<div ng-repeat="json in myJson"> 
     <li>{{json.name}}</li> 

    </div><h1> 
    total: 
    </h1> 

$scope.myJson = [ 
    { 
    "id": "1", 
    "name": "banana", 
    "price": 12, 
    "qty": 3, 
    }, 
    { 
    "id": "2", 
    "name": "watermelon", 
    "price": 12.9, 
    "qty": 4, 
    } 
] 

如何顯示在視圖層總我所知角允許表達像加或減。或者我應該在控制器級別執行它？

Answer 1

你可以把一個函數在你的控制器：

$scope.getSum = function() { 
    return $scope.myJson.reduce(function(a,b) {return a.price * a.qty + b.price * b.qty}); 
} 

，然後在HTML中使用它：

total:{{getSum()}} 

這裏是一個工作示例：jsFiddle

Answer 2

您可以使用加法分配

angular.forEach($scope.myJson, function(val) { 
$scope.totalPrice += val.price; 
$scope.totalQty += val.qty; 
}); 

demo fiddle

Answer 3

你可以把一個函數（價格總/對於數量合計 - 在這種情況下的例子是價格總）在你的控制器：

angular.module('app',['QuickList']).controller('mainCtrl', function($scope){ 

    $scope.myJson = [ 
    { 
    "id": "1", 
    "name": "banana", 
    "price": 12, 
    "qty": 3, 
    }, 
    { 
    "id": "2", 
    "name": "watermelon", 
    "price": 12.9, 
    "qty": 4, 
    }] 

    $scope.total = function(){ 
    var total = 0; 
    for(var i = 0; i < $scope.myJson.length; i++){ 
    total += $scope.myJson[i].price; 
    } 
    return total; 
    } 

$scope.total(); 
}) 

這裏是一個工作示例：http://jsfiddle.net/Lht7fodj/

Answer 4

在控制器寫入以下代碼之後的陣列已被定義：

$scope.total = 0; 
for(var i=0; i< $scope.myJson.length; i++){ 
    $scope.total += $scope.myJson[i].price * $scope.myJson[i].qty; 
} 

然後在您的視圖中使用插值爲{{total}}。

更好的方法是將上面的代碼放入一個函數中，並在插入語句中調用它。

Answer 5

放於HTML：

</div><h1> 
total:{{mytotal}} 
</h1> 

和控制器：

$scope.mytotal= $scope.myJson[0].price+$scope.myJson[1].price;