JSFiddle - React, Tailwind, and code Playground

by thomas_rickard

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-controller="test">
  <div ng-repeat="hero in heros">
    {{hero}}
  </div>
  
  <div>
    <input type="text" ng-model="newHero"/>
    <button ng-click="addHero()">Add</button>
  </div>
  
</div>

JavaScript

angular.module('myApp',[]);

angular.module('myApp')
.controller('test',['$scope', 'superheroService',function($scope, superheroService){
	$scope.heros = superheroService.getHeros();
  
  $scope.addHero = function() {
  	superheroService.addHero($scope.newHero);
    $scope.heros = superheroService.getHeros();
    $scope.newHero = '';
  };
}]);

angular.module('myApp')
.factory('superheroService', function(){
	var heros = [];
	
  var addHero = function(newHero) {
  	heros.push(newHero);
  };
  
  var getHeros = function() {
  	return heros;
  };
  
  return {
  	addHero: addHero,
    getHeros: getHeros
  };
});