CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Saksham
Saksham

Reputation: 9380

Replace nested ng-repeat with ng-repeat-start to flatten structure

I have a requirement to show all the items in a flat structure despite of the JSON object being not. I have written a small snippet to elaborate my issue

<!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>

Though this works perfectly fine and get all data in subsequent rows, I see a lot of commented HTML nodes in the DOM explorer and I feel that this could be optimised.

Could you guide me on optimising it?

Upvotes: 1

Views: 317

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Repeat <tbody> instead. A table is not restricted on the number of <tbody> children it has

    <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>

Upvotes: 1

Related Questions