Angular directive to show chain or messages

Question

There is the following HTML markup:

<section class="correspondence">
  <header>
    <div class="from">{{ message.from }}</div>
    <div class="when">{{ message.when }}</div>
  </header>
  <div class="content">
    {{ message.content }}
    <section class="correspondence">
    ...
    </section>
  </div>
</section>

As you can see this is a markup has nested repeat content (chain of letters) - I'd like to print array of messages $scope.messages. How can I do it? I think I should create some directive for it. Can you help me? Thanks!

Answer 1

Try this........ u need to use ng repeat

HTML code same.and add the following script code.

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.messages = [{
        from: "test_from_1",
        when: "test_when_1",
        content: "test_content_1"
    }, {
        from: "test_from_2",
        when: "test_when_2",
        content: "test_content_2"
    }];

});

Answer 2

this is a working example : http://plnkr.co/edit/dZ473fpX9BrxjPH3Cb3L?p=preview

in the controller:

$scope.messages = [{
    from: "from_1",
    when: "when_1",
    content: "content_1"
}, {
    from: "from_2",
    when: "when_2",
    content: "content_2"
},{
    from: "from_3",
    when: "when_3",
    content: "content_3"
}];

---

in the html, use the ng-repeat to loop on a array ( this will create as many section as messages ) :

<section ng-repeat="message in messages" class="correspondence">
  <header>
    <div class="from">{{ message.from }}</div>
    <div class="when">{{ message.when }}</div>
  </header>
  <div class="content">
    {{ message.content }}
    <section class="correspondence">
    ...
    </section>
  </div>
</section>