JSFiddle - React, Tailwind, and code Playground

by gchristman

HTML

<section ng-controller="departmentController">

	<div class="menuContent">
		<div class="maincontent">
			<div class="article">
				<form>
					<section>
						<!--  department Name -->
						<div class="col-md-6">
							<label>Department Name:</label> 
							<input type="text"
								class="form-control" name="name" placeholder="Department"
								ng-model="department.name" required> 
								<br /> 
								<input type="hidden" ng-model="department.id" />
						</div>
							<div class="col-md-6">
							<label>Department Description:</label> 
							<input type="text"
								class="form-control" name="description" placeholder="Description"
								ng-model="department.description" required> 
								<br /> 
								<input type="hidden" ng-model="department.id" />
						</div>
					</section>
					<!-- submit button -->
					<section class="col-md-12">
						<button type="button" class="btn btn-default pull-right"	ng-click="saveNewDepartment()">
						{{testthis}}</button>
						<button ng-show="department.showCancel" type="button" class="btn btn-default pull-right" ng-click="cancelUpdate()">
						Cancel update</button>
					</section>
				</form>
			</div>
			
			Dep:	{{departments}}
			<!--  table -->
			<div class="article">
				<table class="table table-bordered table-striped">
					<tr>
						<th colspan="4">
							<div class="pull-left">Departments</div>
						</th>
					</tr>
					<tr>
						<th>#</th>						
						<th>Department</th>
						<th>Description</th>
						<th>Edit</th>
					</tr>
					<tr ng-repeat="department in departments">
						<td>{{}}</td>					
						<td>{{department.name}}</td>
						<td>{{department.description}}</td>
						<td><a href=""
							ng-click="edit(department)" 
							title="Edit">
							<span class="glyphicon glyphicon-edit"></span>Edit</a>
							| <a href="" ng-click="removeDept(department.id)" title="Delete">
							<span class="glyphicon...

JavaScript

var app = angular.module('myApp', []);
console.log('in dept contr JS');
app.controller('departmentController', function($scope) {
	console.log('in dept contr');

	var uid = 0;
	$scope.departments =[{
		id:5,
		name : 'Compliance',
    description:'Tammy\'s Group'
	}];

	$scope.testthis = 'test this';
	$scope.department = {};
	$scope.department.buttonLabel = 'Save Department';
	$scope.department.showCancel = true;

		;
		//add new department
		$scope.saveNewDepartment = function() {
			if ($scope.department.id == undefined) {
				//if this is new cluster, add it in clusters array
				$scope.departments.push({
					id : uid++,
					name : $scope.department.name,
					description: $scope.department.description
				});
			} else {
				//for existing department, find this department using id and update it.
				$scope.departments[$scope.department.id].name = $scope.department.name;
        $scope.departments[$scope.department.id].description = $scope.department.description;
			//	$scope.dept.id = undefined;
				$scope.department.buttonLabel = 'Update Department';
				$scope.department.showCancel = false;
			}
			;
		//clear the add clusters form
		$scope.department.name = "";
	};
  
  $scope.edit = function(department) {
  	$scope.department = department
  }
	
	
	//delete department
	$scope.removeDept = function(id) {
		//search department with given id and delete it
		for (i in $scope.departments) {
			if ($scope.departments[i].id == id) {
			//	confirm("This department will get deleted permanently");
				$scope.departments.splice(i, 1);
				$scope.department = {};
			} else{
     console.log('not found:' + id);
      }
		}
	};


	$scope.cancelUpdate = function() {
		$scope.department.buttonLabel = 'Save Dept Cancel';
		$scope.department.showCancel = false;
		$scope.department.id = undefined;
		$scope.department.name = "";
$scope.department.description = "";
	};
});