karkranikhil · August 17, 2015 10:06
diff --git a/CRUD app using angular b/CRUD app using angular
 <!DOCTYPE html>
 <html ng-app="app">
 <head>
 <title>contact</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=9,IE=10,IE=11,IE=edge,chrome=1" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script	src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
 </head>
 <body  ng-controller="ContactController">
 <div>
    <form class="well">
        <label>Name</label>
        <input type="text" name="name" ng-model="newcontact.name"/><br>
        <label>Email</label>
        <input type="text" name="email" ng-model="newcontact.email"/><br>
        <label>Phone</label>
        <input type="text" name="phone" ng-model="newcontact.phone"/>
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
        <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
    </form>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td>{{ contact.name }}</td>
                <td>{{ contact.email }}</td>
                <td>{{ contact.phone }}</td>
                <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

                </td>
            </tr>
        </tbody>
    </table>
 </div>
 <script>
 var module = angular.module('app', []);

 module.service('ContactService', function () {
    //to create unique contact id
    var uid = 1;
    
    //contacts array to hold list of all contacts
    var contacts = [{
        id: 0,
        'name': 'Viral',
            'email': 'hello@gmail.com',
            'phone': '123-2343-44'
    }];
    
    //save method create a new contact if not already exists
    //else update the existing object
    this.save = function (contact) {
        if (contact.id == null) {
            //if this is new contact, add it in contacts array
            contact.id = uid++;
            contacts.push(contact);
        } else {
            //for existing contact, find this contact using id
            //and update it.
            for (i in contacts) {
                if (contacts[i].id == contact.id) {
                    contacts[i] = contact;
                }
            }
        }

    }

    //simply search contacts list for given id
    //and returns the contact object if found
    this.get = function (id) {
        for (i in contacts) {
            if (contacts[i].id == id) {
                return contacts[i];
            }
        }

    }
    
    //iterate through contacts list and delete 
    //contact if found
    this.delete = function (id) {
        for (i in contacts) {
            if (contacts[i].id == id) {
                contacts.splice(i, 1);
            }
        }
    }

    //simply returns the contacts list
    this.list = function () {
        return contacts;
    }
 });

 module.controller('ContactController', function ($scope, ContactService) {

    $scope.contacts = ContactService.list();

    $scope.saveContact = function () {
        ContactService.save($scope.newcontact);
        $scope.newcontact = {};
    }


    $scope.delete = function (id) {

        ContactService.delete(id);
        if ($scope.newcontact.id == id) $scope.newcontact = {};
    }


    $scope.edit = function (id) {
        $scope.newcontact = angular.copy(ContactService.get(id));
    }
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html ng-app="app">
	<head>
	<title>contact</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=9,IE=10,IE=11,IE=edge,chrome=1" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
	</head>
	<body ng-controller="ContactController">
	<div>
	<form class="well">
	<label>Name</label>
	<input type="text" name="name" ng-model="newcontact.name"/><br>
	<label>Email</label>
	<input type="text" name="email" ng-model="newcontact.email"/><br>
	<label>Phone</label>
	<input type="text" name="phone" ng-model="newcontact.phone"/>
	<br/>
	<input type="hidden" ng-model="newcontact.id" />
	<input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
	</form>
	<table class="table table-striped table-bordered">
	<thead>
	<tr>
	<th>Name</th>
	<th>Email</th>
	<th>Phone</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="contact in contacts">
	<td>{{ contact.name }}</td>
	<td>{{ contact.email }}</td>
	<td>{{ contact.phone }}</td>
	<td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> \| <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<script>
	var module = angular.module('app', []);

	module.service('ContactService', function () {
	//to create unique contact id
	var uid = 1;

	//contacts array to hold list of all contacts
	var contacts = [{
	id: 0,
	'name': 'Viral',
	'email': 'hello@gmail.com',
	'phone': '123-2343-44'
	}];

	//save method create a new contact if not already exists
	//else update the existing object
	this.save = function (contact) {
	if (contact.id == null) {
	//if this is new contact, add it in contacts array
	contact.id = uid++;
	contacts.push(contact);
	} else {
	//for existing contact, find this contact using id
	//and update it.
	for (i in contacts) {
	if (contacts[i].id == contact.id) {
	contacts[i] = contact;
	}
	}
	}

	}

	//simply search contacts list for given id
	//and returns the contact object if found
	this.get = function (id) {
	for (i in contacts) {
	if (contacts[i].id == id) {
	return contacts[i];
	}
	}

	}

	//iterate through contacts list and delete
	//contact if found
	this.delete = function (id) {
	for (i in contacts) {
	if (contacts[i].id == id) {
	contacts.splice(i, 1);
	}
	}
	}

	//simply returns the contacts list
	this.list = function () {
	return contacts;
	}
	});

	module.controller('ContactController', function ($scope, ContactService) {

	$scope.contacts = ContactService.list();

	$scope.saveContact = function () {
	ContactService.save($scope.newcontact);
	$scope.newcontact = {};
	}


	$scope.delete = function (id) {

	ContactService.delete(id);
	if ($scope.newcontact.id == id) $scope.newcontact = {};
	}


	$scope.edit = function (id) {
	$scope.newcontact = angular.copy(ContactService.get(id));
	}
	});
	</script>
	</body>
	</html>
No results found