<!doctype html>
<html>
<head>
<title>AngularJs CRUD operations demo example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('empApp', []);
app.controller('empCtrl', ['$scope', function($scope) {
//Employee collection
$scope.employee = [{
id: 1,
name: 'Anil Singh',
age: 30,
web: 'www.code-sample.com'
}, {
id: 2,
name: 'Sunil Singh',
age: 25,
web: 'www.code-sample.com'
}, {
id: 3,
name: 'Sushil',
age: 20,
web: 'www.code-sample.com'
}, {
id: 4,
name: 'Aradhya',
age: 2,
web: 'www.code-sample.com'
}, {
id: 5,
name: 'Reena',
age: 25,
web: 'www.code-sample.com'
}];
//Delete Row
$scope.delete = function(index) {
$scope.employee.splice(index, 1);
//TODO: Login for server call and remove data;
}
//Update Row
$scope.update = function(index, data) {
alert(JSON.stringify(data));
//TODO: logic to render data on popups and update and set;
}
//Copy new Row
$scope.copy = function(index, data) {
var newRow = angular.copy(data);
$scope.employee.push(newRow);
//TODO: Logic for add new rows.
}
}]);
</script>
</head>
<body ng-app="empApp" ng-controller="empCtrl">
<div>
<h1>Employees</h1></div>
<div>
<h3>Id : Name : Age : Web</h3></div>
<div ng-repeat="emp in employee">
<div>
{{emp.id}} : {{emp.name}} : : {{emp.age}} : : {{emp.web}}
<input type="button" value="Update" data-ng-click="update($index, emp)" />
<input type="button" value="Copy" data-ng-click="copy($index, emp)" />
<input type="button" value="delete" data-ng-click="delete($index)" />
</div>
</div>
<div>
<h2><br/>For for detail go to link
<a href="http://www.code-sample.com/2014/09/angularjs-documentation.html" target="_blank">AngularJs Docs</a></h2>
</div>
</body>
</html>
// Code goes here
/* Styles go here */