angularjs

by xBrisa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="jumbotron" ng-controller="appController">
  <h3 class="text-center">
    bem vindo {{ola}}
  </h3>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="c in comentario" ng-if="c.comentario_pai_id == null">
      id: {{c.id}} <strong> comentario:</strong> {{c.comentario}}
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="d in comentario" ng-show="d.comentario_pai_id == c.id ">
          Resposta #{{d.id}} do #{{c.id}} <strong> sub comentario</strong> {{d.comentario}}
        </li>
      </ul>
    </li>
    <span>falta exibir o ID 8 que é resposta do ID 7</span>
  </ul>
</div>

JavaScript

angular
  .module('appCliente', [])
  .controller('appController', appController);

appController.$inject = ['$scope'];

function appController($scope) {
  $scope.ola = "welcome";
  $scope.comentario = [{
      "id": 1,
      "comentario": "capitulo 8",
      "comentario_pai_id": null,
      "capitulo_id": 1
    },
    {
      "id": 2,
      "comentario": "incrível",
      "comentario_pai_id": null,
      "capitulo_id": 1
    },
    {
      "id": 3,
      "comentario": "gostei",
      "comentario_pai_id": null,
      "capitulo_id": 1
    },
    {
      "id": 4,
      "comentario": "gostou mesmo?",
      "comentario_pai_id": 3,
      "capitulo_id": 1
    },
    {
      "id": 5,
      "comentario": "não curti aquela parte",
      "comentario_pai_id": null,
      "capitulo_id": 1
    },
    {
      "id": 6,
      "comentario": "Muito pesado, não é?",
      "comentario_pai_id": 5,
      "capitulo_id": 1
    },
    {
      "id": 7,
      "comentario": "isso é Mansplaining! lacrador",
      "comentario_pai_id": 5,
      "capitulo_id": 1
    },
    {
      "id": 8,
      "comentario": "Lacradora",
      "comentario_pai_id": 7,
      "capitulo_id": 1
    }
  ]

}