Create web application with CURD operation: Adding data, editing data and deleting data in AngularJs.
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script>
app=angular.module("myapp",[]);
app.controller("c1",function($scope){
$scope.un;
$scope.ct;
$scope.txt;
$scope.tmp=false;
$scope.users=[{uname:"scott",city:"hyd"},{uname:"suresh",city:"sce"}]
$scope.fundel=function(ind){
$scope.users.splice(ind,1)
}
$scope.funadd=function(){
ob={uname:$scope.un,city:$scope.ct}
$scope.un=""
$scope.ct=""
$scope.users.push(ob)
}
$scope.funcheck=function(){
if($scope.txt="Add")
$scope.funadd()
else
$scope.funsave()
}
$scope.indd;
$scope.funsave=function(){
$scope.users[$scope.indd].uname=$scope.un
$scope.users[$scope.indd].city=$scope.ct
$scopr.un=""
$scope.ct=""
$scope.tmp=false
}
$scope.funedit=function(indx){
$scope.txt="save"
$scope.indd=indx
$scope.un=$scope.users[indx].uname
$scope.ct=$scope.users[indx].city
$scope.tmp=true
}
});
</script>
<body ng-app="myapp" ng-controller="c1">
<table border="1">
<th>username</th>
<th>city</th>
<tr ng-repeat="x in users">
<td>{{x.uname}}</td>
<td>{{x.city}}</td>
<td><input type ="button" value ="delete" ng-click="fundel($index)"></td>
<td><input type ="button" value ="edit" ng-click="funedit($index)"></td>
</tr>
</table>
</body>
<input type="button" value="Add Red" ng-click="tmp=true;txt='Add'">
<div ng-show='tmp'>
Username:<input ng-model="un"><br>
City : <input ng-model="ct"><br>
<input type="button" value="{{txt}}" ng-click="funcheck()">
</div>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script>
app=angular.module("myapp",[]);
app.controller("c1",function($scope){
$scope.un;
$scope.ct;
$scope.txt;
$scope.tmp=false;
$scope.users=[{uname:"scott",city:"hyd"},{uname:"suresh",city:"sce"}]
$scope.fundel=function(ind){
$scope.users.splice(ind,1)
}
$scope.funadd=function(){
ob={uname:$scope.un,city:$scope.ct}
$scope.un=""
$scope.ct=""
$scope.users.push(ob)
}
$scope.funcheck=function(){
if($scope.txt="Add")
$scope.funadd()
else
$scope.funsave()
}
$scope.indd;
$scope.funsave=function(){
$scope.users[$scope.indd].uname=$scope.un
$scope.users[$scope.indd].city=$scope.ct
$scopr.un=""
$scope.ct=""
$scope.tmp=false
}
$scope.funedit=function(indx){
$scope.txt="save"
$scope.indd=indx
$scope.un=$scope.users[indx].uname
$scope.ct=$scope.users[indx].city
$scope.tmp=true
}
});
</script>
<body ng-app="myapp" ng-controller="c1">
<table border="1">
<th>username</th>
<th>city</th>
<tr ng-repeat="x in users">
<td>{{x.uname}}</td>
<td>{{x.city}}</td>
<td><input type ="button" value ="delete" ng-click="fundel($index)"></td>
<td><input type ="button" value ="edit" ng-click="funedit($index)"></td>
</tr>
</table>
</body>
<input type="button" value="Add Red" ng-click="tmp=true;txt='Add'">
<div ng-show='tmp'>
Username:<input ng-model="un"><br>
City : <input ng-model="ct"><br>
<input type="button" value="{{txt}}" ng-click="funcheck()">
</div>
</head>
<body>
</body>
</html>
EmoticonEmoticon