<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reverse a String using AngularJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h3 align="center"> CRUD Application (without DB)Using AngularJS</h3>
<hr color =" black">
<div class="modal-body">
<div ng-app="myapp" class="container" ng-controller="myctrl">
<table class="table table-striped table-bordered">
<tr>
<tr>
<td>Name</td>
<td>
<input type="text" class="form-control" ng-model="item.name" /></td>
</tr>
<tr>
<td>EmailID</td>
<td>
<input type="text" class="form-control" ng-model="item.email" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" class="form-control" ng-model="item.password" /></td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" class="form-control" ng-model="item.phone" /></td>
</tr>
<tr>
<td class="text-right" colspan="2">
<button ng-click="addItem(item)" class="btn btn-primary">
Add
</button>
</td>
</tr>
</table>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>EmailID</th>
<th>Phone</th>
<th colspan = 2> Action </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<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.email}}</span>
<input type="text" ng-show="editMode" ng-model="item.email" />
</td>
<td>
<span ng-hide="editMode">{{item.phone}}</span>
<input type="text" ng-show="editMode" ng-model="item.phone" />
</td>
<td>
<i ng-hide="editMode" ng-click="editMode = true; editItem(item)" class="glyphicon glyphicon-edit"></i>
<i class="glyphicon glyphicon-saved" ng-show="editMode" ng-click="editMode = false"></i>
</td>
<td>
<i ng-click="removeItem($index)" class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller("myctrl", function ($scope) {
$scope.items = [];
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {};
},
$scope.removeItem = function (index) {
console.log(index);
$scope.items.splice(index, 1)
},
$scope.editItem = function (index) {
$scope.editing = $scope.items.indexOf(index);
}
});
</script>
Output:
No comments:
Post a Comment