Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="comment in comments" ng-include="'comment.html'"></div>
  <script type="text/ng-template"  id="comment.html">
    <div>
      <p>{{comment.author.name}}: {{comment.text}}</p>
      <p>Liked: {{comment.liked || 0}}</p>
      <div class="reply" ng-repeat="comment in comment.replies" ng-include="'comment.html'"></div>
    </div>
  </script>
  </div>
​
​
  </body>
</html>
 
.reply {
  margin-left: 30px;
}
 
angular.module('myApp', [])
.controller('MyCtrl', function($scope, $timeout) {
  $scope.comments = [
    {
      id: 1,
      text: 'Hello World!',
      author: {
        id: 1,
        name: 'Jorge'
      },
      replies: [
        {
          id: 2,
          text: 'Hey, Jorge!',
          author: {
            id: 2,
            name: 'World'
          },
          replies: [
            {
              id: 3,
              text: 'Woah!',
              author: {
                id: 1,
                name: 'Jorge'
              }
            }
          ]
        }
      ]
    }
  ];
  // delay to simulate data from socket
  $timeout(function() {
    // the incoming data
    var likedCommentId = 3;
    var comment = findCommentById($scope.comments, likedCommentId);
    comment.liked = comment.liked ? ++comment.liked : 1;
  }, 500);
})
;
​
function findCommentById(comments, id) {
  return _.flatten(comments.map(function(comment) {
    if (comment.id === id) { return comment; }
    return findCommentById(comment.replies, id);
  }))[0];
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers