0

スコアリングシステムを構築していて、別のコレクションの値に基づいてスコアを計算しようとしています。私はこの例を使用しています:Calculating sum of repeated elements in AngularJS ng-repeat、しかし私は彼らが2つではなく1つのコレクションを使用していると信じて、それを動作させることができませんでした。フィルタリングされたanglejsリピータのアイテムに基づいて値を計算する方法

<div>{{parent.id}}</div> 
<div>{{ getTotal() }}</div> 
<div ng-repeat="child in children | orderBy: '-postedTime' | filter: {parentId: parent.id}"> 
    <div>{{child.score}}</div> 
</div> 

JS:ここ

は、上記の質問からの提案を使用して、私のテンプレートである

$scope.getTotal = function(){ 
var total = 0; 
for(var i = 0; i < $scope.children.length; i++){ 
    var score = $scope.child.score[i]; 
    total += (child.score); 
} 
return total; 
} 

は、上で濾過子どもやディスプレイからすべてのスコアを合計する方法はあります親?

答えて

0

のために必要とされる場所を表示するためにtotalScoreを使用することができかもしれませサム用NG-INITを追加することができます

| "子供と::{parent.id PARENTID}フィルタ子どもの子" あなたは

NG・リピート=フィルタ応答を取ることができます10

あなたの子供のフィルタの構文として使用して、それは合計の子供のスコアの合計を表示する合計フィルタでそれを使用します。

var app = angular.module('plunker', []); 
 

 
angular.module('plunker') 
 
    .controller('MainCtrl', function($scope) { 
 

 

 
    $scope.totalScore = 0; 
 

 
    $scope.parents = [{ 
 
     id: 1 
 
    }, { 
 
     id: 2 
 
    }] 
 

 
    $scope.children = [{ 
 
     parentId: 1, 
 
     score: 25 
 
    }, { 
 
     parentId: 1, 
 
     score: 25 
 
    }, { 
 
     parentId: 1, 
 
     score: 25 
 
    }, { 
 
     parentId: 2, 
 
     score: 25 
 
    }]; 
 

 
    }) 
 

 

 
app.filter('sum', function() { 
 
    return function(kids) { 
 
    var total = 0; 
 
    if (kids) { 
 
     for (i = 0; i < kids.length; i++) { 
 
     total = total + kids[i].score; 
 
     }; 
 
    } 
 
    return total; 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script data-require="[email protected]*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script> 
 
    <script src="app.js"></script> 
 
    <script src="accounts.js"></script> 
 
    <script src="controller.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="parent in parents"> 
 
    <div>parent id : {{parent.id}}</div> 
 
    <div>total child scores : {{ kids | sum }}</div> 
 
    <div ng-repeat="child in children | filter: {parentId: parent.id} as kids"> 
 
     <div>child Scores : {{child.score}}</div> 
 
    </div> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

P.S:私はので、私は子供たちにpostedTimeを削除している両親と子供のための正確なJSONを持っていなかったが、あなたはあなたの実際のコードでそれを使用することができます。

0

それをシンプルに保つために、あなたは

<div ng-repeat="child in children | orderBy: '-postedTime' | filter: {parentId: parent.id}"> 
<td ng-init="totalScore = totalScore + child.score ">{{totalScore}</td>  
</div> 

を探しているあなたはそれがあなた

+0

これはリピーター内で動作します。私はそれを外に表示するためにスコアを取得しようとしています。リピーターに5人の子供がいる場合は、各子供のスコアを合計して親テンプレートに表示します。 ng-initを使ってこれを行うことはできますか? – ChristopherHall

+0

次に{{totalScore}}を削除してスコープでコントローラにアクセスすると、この値にアクセスできるはずです – CrazyMac

関連する問題