Как вычислить значение, основанное на элементах в отфильтрованном ретрансляторе angularjs

Я создаю систему подсчета очков и пытаюсь вычислить оценку на основе значений в отдельной коллекции. Я использовал этот пример: Calculating sum of repeated elements in AngularJS ng-repeat, но не смог заставить его работать, поскольку я считаю, что они используют одну коллекцию, а не две.Как вычислить значение, основанное на элементах в отфильтрованном ретрансляторе angularjs

Вот мой шаблон, используя предложения из приведенного выше вопроса:

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

В ЯШАХ:

$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; 
}

есть способ суммировать все оценки от отфильтрованных детей и отображения на экране родитель?

источник

2017-01-21 ChristopherHall

Вы можете взять отклик фильтра

нг-повтор = "ребенок у детей | фильтр: {ParentID: parent.id} как дети"

используя синтаксис в вашем фильтре для детей и используйте его в фильтре суммы, который отобразит сумму баллов всех детей для родителя.

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: я не имел точную JSON для родителей и детей, поэтому я удалил postedTime у детей, но вы можете использовать его в Вашем коде.

источник

2017-01-21 02:44:50 Deep

Чтобы сохранить его простым, вы можете добавить нг-инициализации для суммы, которую вы ищете

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

Может быть, вы можете использовать totalScore для отображения, где это необходимо для вас

источник

2017-01-21 01:51:29 CrazyMac

Это работает в ретрансляторе, я пытаюсь получить оценку для отображения за ее пределами. Если у меня есть 5 детей в моем ретрансляторе, я хочу суммировать счет каждого ребенка и отображать его в родительском шаблоне. Можно ли это сделать с помощью ng-init? – ChristopherHall

Тогда вы можете удалить {{totalScore}} и получить доступ к нему в контроллере с вашей областью действия, я думаю, вы должны иметь доступ к этому значению – CrazyMac

Как вычислить значение, основанное на элементах в отфильтрованном ретрансляторе angularjs

ответ

Смежные вопросы