<!DOCTYPE HTML>
<html ng-app="myapp">
<head>
<title>Angular Js Crud</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="productController">
<table cellpadding="2" cellspacing='2' border="1px">
<tr>
<th>Id </th>
<th>Name </th>
<th>Price </th>
<th>Quantity </th>
<th>option </th>
</tr>
<tr ng-repeat="product in listproduct">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.quantity}}</td>
<td>
<a href="#" ng-click="del(product.id)">Delete</a> |
<a href="#" ng-click="selectEdit(product.id)">Edit</a>
</td>
</tr>
</table>
<h3>product Information </h3>
<table cellpadding='2' cellspacing='2'>
<tr>
<td>Id</td>
<td><input type='text' ng-model='id'></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>Price</td>
<td><input type="text" ng-model='price'></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type='text' ng-model='quantity'></td>
</tr>
<tr>
<td> </td>
<td>
<input type='button' value="Add" ng-click="add()">
<input type='button' value="Save" ng-click="edit()">
</td>
</tr>
</table>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('productController',function($scope){
$scope.listproduct = [
{id: 'p01',name:'Mobile',price:10000, quantity:20},
{id: 'p02',name:'Fridge',price:50000, quantity:20},
{id: 'p03',name:'TV',price:45000, quantity:20},
{id: 'p04',name:'Desktop',price:12500, quantity:20},
{id: 'p05',name:'Air Contion',price:75000, quantity:20},
];
$scope.add = function(){
$scope.listproduct.push({
id:$scope.id, name:$scope.name, price:$scope.price, quantity:$scope.quantity
});
$scope.id = '';
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
};
$scope.edit = function(){
var index = getSelectIndex($scope.id);
$scope.listproduct[index].name = $scope.name;
$scope.listproduct[index].price = $scope.price;
$scope.listproduct[index].quantity = $scope.quantity;
};
$scope.selectEdit = function(id){
var index = getSelectIndex(id);
var product = $scope.listproduct[index];
$scope.id = product.id;
$scope.name = product.name;
$scope.price = product.price;
$scope.quantity = product.quantity;
};
$scope.del = function(id){
var result = confirm('Are you sure?');
var index = getSelectIndex(id);
$scope.listproduct.splice(index, 1);
};
function getSelectIndex(id){
for(var i=0;i<$scope.listproduct.length; i++)
if($scope.listproduct[i].id==id)
return i;
return -1;
}
});
</script>
</body>
</html>
<html ng-app="myapp">
<head>
<title>Angular Js Crud</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="productController">
<table cellpadding="2" cellspacing='2' border="1px">
<tr>
<th>Id </th>
<th>Name </th>
<th>Price </th>
<th>Quantity </th>
<th>option </th>
</tr>
<tr ng-repeat="product in listproduct">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.quantity}}</td>
<td>
<a href="#" ng-click="del(product.id)">Delete</a> |
<a href="#" ng-click="selectEdit(product.id)">Edit</a>
</td>
</tr>
</table>
<h3>product Information </h3>
<table cellpadding='2' cellspacing='2'>
<tr>
<td>Id</td>
<td><input type='text' ng-model='id'></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>Price</td>
<td><input type="text" ng-model='price'></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type='text' ng-model='quantity'></td>
</tr>
<tr>
<td> </td>
<td>
<input type='button' value="Add" ng-click="add()">
<input type='button' value="Save" ng-click="edit()">
</td>
</tr>
</table>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('productController',function($scope){
$scope.listproduct = [
{id: 'p01',name:'Mobile',price:10000, quantity:20},
{id: 'p02',name:'Fridge',price:50000, quantity:20},
{id: 'p03',name:'TV',price:45000, quantity:20},
{id: 'p04',name:'Desktop',price:12500, quantity:20},
{id: 'p05',name:'Air Contion',price:75000, quantity:20},
];
$scope.add = function(){
$scope.listproduct.push({
id:$scope.id, name:$scope.name, price:$scope.price, quantity:$scope.quantity
});
$scope.id = '';
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
};
$scope.edit = function(){
var index = getSelectIndex($scope.id);
$scope.listproduct[index].name = $scope.name;
$scope.listproduct[index].price = $scope.price;
$scope.listproduct[index].quantity = $scope.quantity;
};
$scope.selectEdit = function(id){
var index = getSelectIndex(id);
var product = $scope.listproduct[index];
$scope.id = product.id;
$scope.name = product.name;
$scope.price = product.price;
$scope.quantity = product.quantity;
};
$scope.del = function(id){
var result = confirm('Are you sure?');
var index = getSelectIndex(id);
$scope.listproduct.splice(index, 1);
};
function getSelectIndex(id){
for(var i=0;i<$scope.listproduct.length; i++)
if($scope.listproduct[i].id==id)
return i;
return -1;
}
});
</script>
</body>
</html>
Comments
Post a Comment