Question

我要求在平面结构中显示所有项目，尽管JSON对象不是。我写了一个小片段来阐述我的问题

<!DOCTYPE html>
<html>
<head>
    <script src="../Ref/angular.js"></script>
    <script>
    (function(angular){
        angular.module("myApp",[])
        .controller("myCtrl",["$scope",function($scope){
           $scope.trip = {
                "days": [{
                    "day": "first",
                    "activities": [{
                        "name": "treking",
                        "cost": "500"
                    }, {
                        "name": "rafting",
                        "cost": "1500"
                    }]
                }, {
                    "day": "second",
                    "activities": [{
                        "name": "sight seeing",
                        "cost": "2300"
                    }]
                }]
            };
        }])
    })(window.angular);
    </script>
</head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <table>
            <tr ng-repeat-start="objDays in trip.days"></tr>
            <tr ng-repeat="objAct in objDays.activities">
            <td>{{objAct.name}}</td><td>{{objAct.cost}}</td>
            </tr>
            <tr ng-repeat-end></tr>
        </table>
    </body>
</html>

虽然这完全正常并且可以在后续行中获取所有数据，但我在DOM资源管理器中看到了很多注释的HTML节点，我觉得这可以进行优化。

你可以指导我进行优化吗？

Answer 1

重复<tbody>。表格不限于<tbody>个孩子的数量

    <table>
        <tbody ng-repeat-start="objDays in trip.days">
           <tr ng-repeat="objAct in objDays.activities">
              <td>{{objAct.name}}</td><td>{{objAct.cost}}</td>
           </tr>
        </tbody>
    </table>

用ng-repeat-start替换嵌套的ng-repeat以展平结构

1 个答案: