Angularjs: Nested repeat in angular doesn’t work

Following this article

But it seemed not to work on my json structure. Here is my json

$scope.trucks = [
    {
        id: 4,
        truckNumber: '50LD 02456',
        driverName: 'Dẻo',
        shipments: [
            {
                id: 1,
                routeCode: "THC-VinhHao",
                trip: 2
            },
            {
                id: 2,
                routeCode: "THC-VinhHao(R)",
                trip: 3
            },
            {
                id: 3,
                routeCode: "THC2-Hiệp Thành HM",
                trip: 3
            }
        ]
    },
    {
        id: 5,
        truckNumber: '61C 03948',
        driverName: 'Hưng',
        shipments: [
            {
                id: 4,
                routeCode: "TBC-VBL HMo",
                trip: 1
            },
            {
                id: 5,
                routeCode: "THC2-Hiệp Thành HM",
                trip: 4
            }
        ]
    }
  ];

And here is my html repeat.

<ul>
  <li data-ng-repeat="truck in trucks">
    {{truck.truckNumber}}
    <br />
    <ul>
      <li data-np-repeat="shipment in truck.shipments">{{shipment.routeCode}}</li>
    </ul>
  </li>
</ul>

Any help are appreciated. Thanks for reading.


Source: javascript

1 Comment

  1. Digin Dominic

    This answer your second question using your current API Plunker

    app.js

    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.event = {
    "id": "54d75dd9686f6c2594020000",
    "subevents": [
    {
    "id": "54d75de1686f6c2594030000",
    "name": "Test",
    "event_images": [
    {
    "id": "54df3904686f6c41cf0c0000",
    "thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
    },
    {
    "id": "54df56c5686f6c41cf850100",
    "thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
    }
    ]
    }
    ]
    };
    });
    app.directive('myEvent', function(){
    return {
    scope: { myEvent: '=' },
    template: "{{myEvent.id}}",
    controller: function($scope){
    this.removeSubevent = function(e){
    $scope.myEvent.subevents.splice($scope.myEvent.subevents.indexOf(e), 1);
    };
    }
    };
    });
    app.directive('mySubevent', function(){
    return {
    scope: {mySubevent: '='},
    template: "{{ mySubevent.name }} remove subevent",
    require: '^myEvent',
    link: function(scope, ele, attrs, myEventCtrl){
    scope.remove = function(){
    myEventCtrl.removeSubevent(scope.subevent);
    };
    },
    controller: function($scope){
    this.removeImg = function(img){
    $scope.mySubevent.event_images.splice($scope.mySubevent.event_images.indexOf(img), 1);
    };
    }
    };
    });
    app.directive('mySubeventImg', function(){
    return {
    scope: { mySubeventImg: '=' },
    template: "remove img",
    require: '^mySubevent',
    link: function(scope, ele, attrs, mySubeventCtrl){
    scope.remove = function(){
    mySubeventCtrl.removeImg(scope.mySubeventImg);
    };
    }

    };
    });


    index.html

    Reply

Leave a Reply