Question

我有一个面额列表，每个都有能力添加一个卷。当我单击按钮添加角色时，它会执行以下操作：

$scope.addRoll = function (type) {
    $scope.rollArray.push({
        "type": type,
        "value": utilityFactory.getByLabel(type).clipValue
    });
}

HTML输出目前是

<ul class="rollList">
    <li ng-repeat="rolls in rollArray"><span>{{rolls.type}} | {{'$' + rolls.value.toFixed(2)}}</span></li>
</ul>

在UI上看起来像这样

便士| $ 0.50
便士| $ 0.50
便士| $ 0.50

我宁愿能够表现出类似的东西：

3便士| $ 1.50

有没有办法使用ng-repeat并对相同的元素进行分组并计算总数？

Answer 1

要创建聚合，它可以像倒置索引一样简单：

$scope.rollArray = [];
$scope.index = {};

var invertCounts = function(rollArray) {
    var object = {};

    for(var i in rollArray) {
        var type = rollArray[i].type;
        if(angular.isUndefined(object[type])) {
            object[type] = { count: 0, items: [], sum: 0.0 };
        }

        object[type].count++;
        object[type].items.push(rollArray[i]);
        object[type].sum += rollArray[i].value.toFixed(2)
    }

    return object;
}

$scope.addRoll = function (type) {
    $scope.rollArray.push({
        "type": type,
        "value": utilityFactory.getByLabel(type).clipValue
    });

    $scope.index = invertCounts($scope.rollArray);
};

以下为HTML

<ul>
    <li ng-repeat="(type, value) in invertCounts(rollArray)">
        {{ value.count + ' ' + type + ' -> ' + value.sum }}
    </li>
</ul>

它不是一个完美的解决方案，但它是如何实现它的粗略实现。

更新

我的坏，那不会忘记那只是在jsfiddle中测试过它：

http://jsfiddle.net/dmcquillan314/8nfLtxsw/

显示数组摘要

1 个答案:

更新