<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bday application</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js";></script>
</head>
<body ng-app="myForm">
<script>
var app = angular.module('myForm', []);
app.controller('myController', ['$scope', function($scope) {
// $scope.users = [{'name':'A','email':'[email protected]',
'dob':'06-01-77'},{'name':'B','email':'[email protected]','dob':'06-01-77'}];
/* $scope.name = 'hello';
$scope.email = '[email protected]';
$scope.dob = new Date();*/
// $scope.users = [{}];
$scope.users = [
{
"name": "samira khan",
"dob": "16-11-22",
"email": "[email protected]"
}
];
$scope.submit = function() {
$scope.users.push(this.user);
/*$scope.user.name.push(this.name);
$scope.user.email.push(this.email);
$scope.user.name.push(this.dob);*/
this.user = '';
};
$scope.removeUser = function(user) {
var i = $scope.users.indexOf(user);
$scope.users.splice(i, 1);
};
// $scope.editorEnabled = false;
$scope.enableEditor = function(key,name,dob,email) {
// alert(name);
/*name = $scope.name;
dob = $scope.dob;
email = $scope.email;*/
$scope.editorEnabled = true;
$scope.editableUsername = name;
$scope.editableUserDob = dob;
$scope.editableUserEmail = email;
};
$scope.disableEditor = function() {
$scope.editorEnabled = false;
};
$scope.save = function() {
name = $scope.editableUsername;
console.log(name);
console.log($scope.editableUsername);
alert($scope.editableUsername);
dob = $scope.editableUserDob;
email = $scope.editableUserEmail;
$scope.disableEditor();
};
}]);
</script>
<div ng-controller="myController">
<form ng-submit="submit()" >
Name:<input type="text" id ="" ng-model="user.name"/><br><br>
DoB: <input type="date" ng-model="user.dob" placeholder="dd-mm-yy"
/><br><br>
Email:<input type="email" ng-model="user.email"/>
<input type="submit" id="submit" value="Submit" />
<!--<pre>user ={{users|json}}</pre> -->
</form>
<div ng-hide="editorEnabled"> <ul>
<li ng-repeat="(key,user) in users">{{users[$index].name}}
<blockquote>{{key}}
Name: {{user.name}}<br>
Email: {{user.email}}<br>
Dob: {{user.dob }}<br>
</blockquote>
<a href="" ng-click="removeUser(user)">remove</a>
<a href="#"
ng-click="enableEditor(key,user.name,user.dob,user.email)">Edit user</a>
<br><br> </li> </ul>
</div>
<div ng-show="editorEnabled">
Name:<input type="text" id ="" ng-model="editableUsername"
ng-show="editorEnabled"/><br><br>
DoB: <input type="date" ng-model="editableUserDob"
placeholder="dd-mm-yy" ng-show="editorEnabled" /><br><br>
Email:<input type="email" ng-model="editableUserEmail"
ng-show="editorEnabled"/>
<a href="#" ng-click="save()">Save</a>
or
<a href="#" ng-click="disableEditor()">cancel</a>.
</div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
