JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<div ng-app="themeApp" ng-controller="ColorCtrl">
		<ul>
			<li ng-repeat="color in colors">{{color}} <span style="cursor:pointer" ng-click="removeColor($index)"><img src="https://cdn1.iconfinder.com/data/icons/diagona/icon/10/101.png" /></span></li>
		</ul>

		<form ng-submit="addColor()">
			<input id="color" type="text" ng-model="enteredColor" >
			<input type="submit" value="add">
		</form>
</div>

JavaScript

var themeApp = angular.module('themeApp', []);
themeApp.controller('ColorCtrl', function ($scope){
	$scope.colors = ['Red','Blue','Green'];

	$scope.addColor = function() {
		var addToArray=true;
		for(var i=0;i<$scope.colors.length;i++){
		    if($scope.colors[i]===$scope.enteredColor){
		    	alert("Color Already Exists");
		        addToArray=false;
		        break;
		    }
		}
		if(addToArray)
			$scope.colors.push($scope.enteredColor);
		$("#color").val("");
		console.log(colors);
	};

	$scope.removeColor = function(index){
		colors.splice(index, 1);
		console.log(colors);
	};

});