JSFiddle - React, Tailwind, and code Playground

by ganesh_modak_fis

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<style type="text/css">
		
		.center {
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  width: 50%;
		}
		
	</style>

</head>

<body >
	<div ng-controller="myController" class="container">
		<h2 align="center">The Mobile Store</h2><br/>
		



		<ng-view></ng-view>

	</div>

	

	

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
<script src="js/app.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



</body>

</html>

JavaScript

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
	  
	  $routeProvider
	  .when("/", {
	    templateUrl : "cards.html"
	  })
	  .when("/addModel", {
	    templateUrl : "add_model.html"
	  })
	  
});

var myController  = myApp.controller('myController', function($scope){

	$scope.header = "Mobile Store";

	var S10 = {id:1, modelName:"Galaxy S10", price:56000, maker:"Samsung", image:"images/s10.jpg"};
	var op7pro = {id:2, modelName:"OnePlus 7 Pro", price:49000, maker:"OnePlus", image:"images/op7pro.jpg"};
	var iPhoneXs = {id:3, modelName:"iPhone Xs", price:75000, maker:"Apple", image:"images/iPhoneXs.jpg"};
	$scope.inventory = [S10, op7pro, iPhoneXs];
	$scope.indexToDelete;
	
	$scope.deleteModel = function(id){
		
		angular.forEach($scope.inventory, function(model, index) {
		    if(id === model.id){
		    	$scope.indexToDelete = index;
		    }
		});

		$('#deleteDialog').modal('show');
	};


	$scope.actualDelete = function(){
		$scope.inventory.splice($scope.indexToDelete, 1); 	
		$('#deleteDialog').modal('hide');
	}

});