JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<div id="exemploApp" ng-controller="exemploCtrl">
  <div ng-repeat="genero in listaGeneros" ng-hide="novoGenero && genero.nome.indexOf(novoGenero)<0">
    <input type="checkbox" ng-model="genero.marcado" /> {{genero.nome}}
    <button removergenero>Remover</button>
  </div>
  <div>
    <input ng-model="novoGenero" />
    <button adicionargenero>Adicionar</button>
  </div>
  <div>
    <button verjson>Exibir o JSON</button>
  </div>
</div>

JavaScript

var exemploApp = angular.module('exemploApp', [])
	.controller('exemploCtrl', ['$scope', function($scope) {
  	$scope.listaGeneros = [];
  	$scope.novoGenero = '';
  }])
	.directive('adicionargenero', [function() {
  	return function (scope, element, attrs) {
    	angular.element(element).click(function(e) {
      	e.preventDefault();
        
        scope.$apply(function() {
        	scope.listaGeneros.push({
          	nome: scope.novoGenero,
            marcado: false,
          });
          scope.novoGenero = '';
        });
        
      })
    };
  }])  
  
	.directive('removergenero', [function() {
  	return function (scope, element, attrs) {
    	angular.element(element).click(function(e) {
      	e.preventDefault();
        
        scope.$apply(function() {
        	scope.$parent.listaGeneros.splice(scope.$index, 1);
        });
        
      })
    };
  }])
  
  
	.directive('verjson', [function() {
  	return function (scope, element, attrs) {
    	angular.element(element).click(function(e) {
      	e.preventDefault();
        
        alert(angular.toJson(scope.listaGeneros))
        
      })
    };
  }])
;
  
$(document).ready(function() {

  angular.bootstrap('#exemploApp', ['exemploApp']);
});