ngRepeat에서 Object 키 값의 합계를 얻으십시오.

Question

ngRepeat 루프에있는 모든 오브젝트의 'amount'키 합계를 얻으려고합니다. 그 금액을 보낸 사람을 나타내는 다른 키 '이름'을 기반으로 합계를 필터링해야합니다.

예를 들어 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> 

자바 스크립트

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" 
} 

Answer 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 --> 

Answer 2

나는 내가이 일을 가장 우아한 방법으로 생각하지 않지만, 해결책을 알아 내기 위해 관리 그것 그러나 잘 만하면 누군가는 위로로 위로 생각한 무슨을의 위에 건설 할 수있다. 누군가가 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>