<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="script.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type='text/css' rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class='col-sm-12'>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="text-center">
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</th>
<th>First Name</th>
<th>Last Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td class="text-center">
<input type="checkbox" ng-model="employee.selected" ng-change="setSelectedEmployee(employee)"/>
</td>
<td>{{employee.fname}}</td>
<td>{{employee.lname}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
<div class='col-sm-12' style="padding-left:30px">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="fname" ng-model="selectedEmployee.fname" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="lname" ng-model="selectedEmployee.lname" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Salary</label>
<div class="col-md-4">
<input type="text" class="form-control" name="salary" ng-model="selectedEmployee.salary" />
</div>
</div>
<div class="form-group" style="padding-left:15px">
<div>
<input type="button" value="Add" ng-if="!singleEmployeeSelected" ng-click="addRow()" class="btn btn-primary" />
<input type="button" value="Edit" ng-if="singleEmployeeSelected" ng-click="edit()" class="btn btn-primary" />
<input type="button" class="btn btn-danger" ng-click="remove()" ng-disabled="$scope.employees.selected.length" value="Remove">
</div>
</div>
<div class="alert alert-danger" role="alert" ng-if="errorMessage === true">
Record Already Exists!
</div>
</form>
</div>
</div>
</body>
</html>
var app = angular.module("myApp", []);
app.controller('MainCtrl', ['$scope','$filter', function ($scope, $filter){
$scope.employees = [
{ id: 1, 'fname': 'Abhishek', 'lname': 'Pabba', 'salary': 15000},
{ id: 2, 'fname': 'Shiva', 'lname': 'Vuppala', 'salary': 25000},
{ id: 3, 'fname': 'Manoj', 'lname': 'Krishna', 'salary': 35000}
];
$scope.errorMessage = false;
$scope.addRow = function () {
var maxID = (Math.max.apply(null, $scope.employees.map(x => x.id)) || 0) + 1;
if(!!$scope.employees.find(x => x.fname === $scope.selectedEmployee.fname && x.lname === $scope.selectedEmployee.lname)) {
//alert('already eixsts');
$scope.errorMessage = true;
return;
}
$scope.employees.push({'fname': $scope.selectedEmployee.fname, 'lname': $scope.selectedEmployee.lname, 'salary': $scope.selectedEmployee.salary, id: maxID});
$scope.selectedEmployee.fname = '';
$scope.selectedEmployee.lname = '';
$scope.selectedEmployee.salary = '';
}
$scope.remove = function () {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.employees, function(selected) {
if(!selected.selected) {
newDataList.push(selected);
}
$scope.employees = newDataList;
$scope.selectedEmployee.fname = '';
$scope.selectedEmployee.lname = '';
$scope.selectedEmployee.salary = '';
});
}
$scope.checkAll = function () {
$scope.selectedAll = false;
if(!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.employees, function(employee){
employee.selected = $scope.selectedAll;
});
}
$scope.singleEmployeeSelected = false;
$scope.setSelectedEmployee = function (employee){
if($scope.employees.filter(x => x.selected).length > 1){
$scope.selectedEmployee = null;
$scope.singleEmployeeSelected = false;
} else {
$scope.selectedEmployee = angular.copy($scope.employees.find(x => x.selected));
$scope.singleEmployeeSelected = !!$scope.selectedEmployee;
}
}
$scope.edit = function() {
if(!!$scope.employees.find(x => x.fname === $scope.selectedEmployee.fname && x.lname === $scope.selectedEmployee.lname)) {
//alert('already eixsts');
$scope.errorMessage = true;
return;
}
var employeeToEdit = $scope.employees.find(x => x.id === $scope.selectedEmployee.id);
employeeToEdit .fname = $scope.selectedEmployee.fname;
employeeToEdit .lname = $scope.selectedEmployee.lname;
employeeToEdit .salary = $scope.selectedEmployee.salary;
}
}]);