Question

我理解10次摘要迭代的问题是这里讨论的话题，但我找不到适合我的解决方案。原谅我的无知，我仍然是新手。

我的范围变量如下所示：

    $scope.output = {"0":{"Error Count : ":{"0":"0 in MS1","1":"0 in MS2","2":"0 in MS3","3":"0 in MS4"}}}

我正在尝试使用

进行迭代

    <div ng-repeat="out in output">
        <div ng-repeat="(key, val) in out">
            {{key}}
                <div ng-repeat="valy in val">
                    {{valy}}
                </div>  
        </div>
    </div>

这引起了我一个infdig错误。

Answer 1

如果没有看到您的控制器，很难分辨。但无论如何最好处理控制器中的所有迭代。

DEMO

TEMPLATE

<div ng-app="app">
    <div ng-controller="Ctrlr">
        <div ng-repeat="out in output">
            <div ng-bind-html="getOutputValue(out)"></div>
        </div>
    </div>
</div>

JS

angular.module('app', [])
.controller("Ctrlr", ["$scope", "$sce", function($scope, $sce) {
    $scope.output = {
        "0":{
            "Error Count : ": {
                "0":"0 in MS1",
                "1":"0 in MS2",
                "2":"0 in MS3",
                "3":"0 in MS4"
            }
        }
    };

    $scope.getOutputValue = (output) => {
        // Loop over the ouptut keys and reduce all the output to a string
        const stuff = Object.keys(output).reduce((acc, key) => {
            // Get child values and put them in a string of <div>s
            const childVals = Object.values(output[key])
                .map(val => `<div>${val}</div>`)
                .join("");

            // Create string for each iteration
            const iterationString = `<div>${key} ${childVals}</div>`;

            // Update accumulator string with current iteration string
            acc = `${acc} ${iterationString}`;
            return acc;
        }, "");

        // ... use angular $sce to pass HTML string to template
        return $sce.trustAsHtml(`${stuff}`);
    };
}]);

ng-repeat因infdig错误而失败

1 个答案:

TEMPLATE

JS