JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="containter" ng-app="comentarioApp">
  <div class="row" ng-controller="ComentariosController as cc">
    <div class="col-xs-6">
      <h2>Comentarios</h2>
      {{ cc.comentarios }}
      <div ng-repeat="comentario in cc.comentarios track by $index">
        {{comentario.id}} | {{comentario.mensaje }}
        <hr>
        <div class="text-right">
        <button class="btn btn-xs" ng-click="cc.editar(comentario)">
        editar
        </button>
        <button class="btn btn-xs" ng-click="cc.eliminar(comentario)">
        eliminar
        </button>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div ng-show="cc.comentar">
        {{ cc.comentario }}
        <form class="form" role="form" ng-submit="cc.guardarComentario()">
          <textarea class="form-control" ng-model="cc.comentario.mensaje"></textarea>
          <button type="submit" class="btn btn-default">Guardar</button>
        </form>
       </div>
    
    
    <button type="button" class="btn btn-primary" ng-click="cc.escribirComentario()" ng-show="cc.comentar == false">
     Comentar
    </button>
    </div>
  </div>
</div>

JavaScript

angular.module('comentarioApp', [])
.controller('ComentariosController', function(){
	var self = this;
  
  self.comentar = false;
  self.edicion = false;
  self.contador = 1;
  
  self.comentarios = [];
  self.comentario = {};
  
  self.escribirComentario = function(){
  	self.comentar = true;
  };
  
  self.guardarComentario = function(){
    if(self.edicion){
      alert("editando");
    } else {
      self.comentario.id = self.contador;
      self.contador += 1;
      self.comentarios.push(self.comentario);
    }
    self.comentario = {};
    self.comentar = false;
  };
  
  self.editar = function(comentario){
  	self.comentario = {};
  	self.comentario = comentario;
    self.comentar = true;
    self.edicion = true;
  };
  
  self.eliminar = function(comentario){
  	//sliminar
  }
});