HTML
<!DOCTYPE html>
<html
ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
rel="stylesheet">
<script src="app.js"></script>
</head>
<body
ng-controller="MainCtrl" class="container">
<table>
<tr>
<td>Enter ID :</td>
<td>
<input
type="text" placeholder="Enter ID" ng-model="emp.id" class="form-control"><br>
</td>
</tr>
<tr>
<td>
Enter Name :
</td>
<td>
<input
type="text" placeholder="Enter Name" ng-model="emp.name" class="form-control"><br>
</td>
</tr>
<tr>
<td>Enter city :</td>
<td>
<input
type="text" ng-model="emp.city" placeholder="Enter City" class="form-control"><br>
</td>
</tr>
<tr>
<td>Enter salary :</td>
<td>
<input
type="text" ng-model="emp.salary" placeholder="Enter Salary" class="form-control"><br>
</td>
</tr>
<tr>
<td>
<a
class="btn" ng-click="Add()"><i class="icon-plus"></i>Add</a>
</td>
<td align="left">
<input
type="button" class="btn btn-danger" value="Delete" ng-click="Delete(emp.id)">
</td>
</tr>
</table>
<pre>{{employees|json:14}}
</pre>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.employees = [{
id: 1,
name: "Ranjeet",
city: "Mumbai",
salary: 5000
}, {
id: 2,
name: "Abhishek",
city: "Mumbai",
salary: 5000
}, {
id: 3,
name: "Gaurav",
city: "Mumbai",
salary: 5000
}, {
id: 4,
name: "Shashikant",
city: "Mumbai",
salary: 10000
}];
$scope.Add = function () {
$scope.employees.push({ id: $scope.emp.id, name: $scope.emp.name, city:
$scope.emp.city, salary: $scope.emp.salary });
$scope.reset();
}
$scope.reset = function () {
$scope.emp.id = "";
$scope.emp.name = "";
$scope.emp.city = "";
$scope.emp.salary = "";
}
$scope.Delete = function (id) {
angular.forEach($scope.employees,function(value,key){
if(value.id==id){
$scope.employees.splice(key, 1);
}
})
}
});
No comments:
Post a Comment