Angular table with edit,update and delete
<!DOCTYPE html>
<html lang="en" ng-app='MyApp' >
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script>
var app=angular.module('MyApp', []);
app.controller('maincontroller',function($scope){
$scope.items=[
{
name:"John Doe",
city:'Ludhiana',
state:'new York'
},
{
name:"John cena",
city:'hariana',
state:'USA'
},
{
name:"sunny",
city:'Bombay',
state:'Punjab'
}
];
$scope.del=function(item){
console.log(item);
};
$scope.add=true;
$scope.addEnabled=function(){
$scope.add=false;
}
$scope.addItem=function(item){
console.log(item);
$scope.items.push(item);
$scope.add=true;
};
$scope.addCancel=function(){
$scope.add=true;
};
$scope.edit=function(item){
console.log(item);
}
});
</script>
</head>
<body>
<div ng-controller="maincontroller">
<button ng-click='add = false;'>ADD</button>
<input type="text" ng-model="search">
<table border="1">
<tr ng-hide="add">
<td><input type="text" ng-model="item.name"></td>
<td><input type="text" ng-model="item.city" ></td>
<td><input type="text" ng-model="item.state"></td>
<td> <button ng-click="addItem(item)" >save</button> </td>
<td> <button ng-click="addCancel()" >Cancel</button> </td>
</tr>
<tr ng-repeat="item in items| filter:search">
<td>
<span ng-hide="editMode">{{item.name}}</span>
<input type="text" ng-show="editMode" ng-model="item.name">
</td>
<td>
<span ng-hide="editMode">{{item.city}}</span>
<input type="text" ng-show="editMode" ng-model="item.city">
</td>
<td>
<span ng-hide="editMode"> {{item.state}} </span>
<input type="text" ng-show="editMode" ng-model="item.state">
</td>
<td>
<button ng-click="editMode=true;" ng-hide="editMode">edit</button>
<button ng-click="editMode=false; edit(item)" ng-show="editMode">Save</button>
</td>
<td><button ng-click="del(item)" >delete</button></td>
</tr>
</table>
</div>
</body>
</html>
Comments
Post a Comment