2014-08-28 52 views
1

我試圖獲取ngRepeat循環中所有對象的'amount'鍵的總和。我還需要根據代表花費那個金額的人的另一個關鍵字'name'來過濾該金額。在ngRepeat中獲取Object鍵值的總和

因此,舉例來說,我想單獨計算Mary和Lewis花費的總金額。對於Angular來說,我是一個相對陌生的人,不確定實現這一點的正確方法。任何幫助將不勝感激。

HTML

<!-- Mary's Items --> 
    <div class="col-md-4"> 
    <h1>Mary</h1> 
    <div class="well" ng-repeat="post in posts | filter: {name: 'Mary' } | orderBy: 'created_at':true"> 
    <!-- exit a message --> 

    <h4>{{post.title}}</h4> 
    <h3>${{post.amount}}</h3> 
    <p>{{post.details}}</p> 
     <!-- delete message --> 

    <p><a href="javascript:void(0);" class="pull-right glyphicon glyphicon-trash" ng-click="messages.$remove(post)"></a></p> 
    </div> 
    </div> 


    <!-- Lewis' Items --> 
    <div class="col-md-4 col-md-offset-1"> 
    <h1>Lewis</h1> 
    <div class="well" ng-repeat="post in posts | filter: {name: 'Lewis' } | orderBy: 'created_at':true"> 
    <!-- exit a message --> 

    <h4>{{post.title}}</h4> 
    <h3>${{post.amount}}</h3> 
    <p>{{post.details}}</p> 
    <p>{{post.created_at}}</p> 
     <!-- delete message --> 
    <p> 
    <a href="#/edit/{{posts.indexOf(post)}}">edit</a> 

    <a href="javascript:void(0);" class="pull-right glyphicon glyphicon-trash" ng-click="removePost(post)" ng-confirm-click="Are you sure you want to remove this item?"></a> 
    </p> 
    </div> 

的JavaScript

spendingApp.controller("SpendingController", function($scope, $firebase,$stateParams) { 


    //Setup Firebase DB and make available to app 
    var ref = new Firebase("**Firebase URL**"); 
    var sync = $firebase(ref); 
    $scope.posts = sync.$asArray(); 
    $scope.whichItem = $stateParams.itemId; 
    console.log($stateParams); 

    $scope.itemTitle = $scope.whichItem; 

    // Add new Item to DB 
    $scope.addPost = function() { 
    $scope.posts.$add({ 
     name: $scope.itemName, 
     title: $scope.itemTitle, 
     details: $scope.itemDetails, 
     amount: parseFloat($scope.itemAmount), 
     created_at: Date() 
    }); 
    // Clears values; 
    $scope.itemName = ""; 
    $scope.itemAmount = ""; 
    $scope.itemTitle = ""; 
    $scope.itemDetails = ""; 
    } 





}); 

JSON例子

{ 
    "amount" : 16.04, 
    "created_at" : "2014-08-17T17:40:18.846Z", 
    "details" : "upgrade", 
    "id" : 36, 
    "name" : "Lewis", 
    "title" : "Street Fighter Ultra", 
    "updated_at" : "2014-08-17T17:40:18.846Z" 
}, { 
    "amount" : 19, 
    "created_at" : "2014-08-17T17:41:08.341Z", 
    "details" : "", 
    "id" : 37, 
    "name" : "Lewis", 
    "title" : "Webfaction Web Hosting", 
    "updated_at" : "2014-08-17T17:41:08.341Z" 
} 

回答

1

嘗試與angular-filter模塊sumFilter工作。
例如:
JS:

$scope.users = [ 
    { id: 1, name: 'Ariel', amount: 16.54 }, 
    { id: 2, name: 'Dan', amount: 13.74 }, 
    { id: 3, name: 'Ron', amount: 43.90 }, 
    { id: 4, name: 'Greg', amount: 71.09 }, 
    { id: 5, name: 'Alex', amount: 84.99 }, 
]; 

HTML:

<p>{{ users | map: 'amount' | sum }}</p> 
<!--Result: 230.26 --> 
0

我設法找出解決的辦法,但我不認爲這是做的最優雅的方式但希望有人可以根據我的想法來構建。如果有人能告訴我如何從3200中減去getTotal()到控制器中,而不是我非常感謝的視圖。

JS

// Calculate Total Amount Spent 
    $scope.getTotal = function(user){ 
    var total = 0; 
    for(var i = 0; i < $scope.posts.length; i++){ 
     var post = $scope.posts[i]; 
     if (post.name === user) { 
      total += post.amount; 
     } 
    } 
    return Math.round(total * 100)/100; 
} 

HTML

<h4>Remaining Balance ${{ 3200 - getTotal("Lewis") }}</h4>