angular.module('myApp', []).controller('myController', function ($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [{
id: 1,
fName: "Ramesh",
lName: "Kumar"
}, {
id: 2,
fName: "Digvijay",
lName: "Pathak"
}, {
id: 3,
fName: "Sanjay",
lName: "Bhatt"
}];
$scope.new = true;
$scope.error = false;
$scope.incomplete = false;
$scope.edit = false;
$scope.init = function () {
//alert('loading');
$scope.test();
}
$scope.editUser = function (id) {
$scope.incomplete = true;
if (id == 'new') {
$scope.new = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.new = false;
$scope.fName = $scope.users[id - 1].fName;
$scope.lName = $scope.users[id - 1].lName;
}
};
$scope.saveUser = function () {
if ($scope.new == true) {
var arrLength = $scope.users.length + 1;
var data = {
id: arrLength,
fName: $scope.fName,
lName: $scope.lName
};
$scope.users.push(data);
}
};
$scope.$watch('passw1', function () {
$scope.test();
});
$scope.$watch('passw2', function () {
$scope.test();
});
$scope.$watch('fName', function () {
$scope.test();
});
$scope.$watch('lName', function () {
$scope.test();
});
$scope.test = function () {
if (($scope.passw1.length > 0) && ($scope.passw1 == $scope.passw2)) {
$scope.error = false;
} else {
$scope.error = true;
}
if ($scope.fName.length > 0 && $scope.lName.length > 0 && $scope.passw1.length > 0 && $scope.passw2.length > 0) {
$scope.incomplete = false;
}
};
});
<body ng-app="myApp" ng-controller="myController" data-ng-init="init()">
<div class="container">
<h3>User Registration</h3>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>-</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
<td>
<button class="btn" ng-click="editUser(user.id)">Edit</button>
</td>
</tr>
</tbody>
</table>
<hr>
<button ng-click="editUser('new')">Create New User</button>
<hr>
<h3 ng-show="new">Create New User:</h3>
<h3 ng-show="!new">Edit User:</h3>
<form>
<div>
<label>First Name:</label>
<div>
<input type="text" ng-model="fName" ng-disabled="!new" placeholder="First Name">
</div>
</div>
<div>
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!new" placeholder="Last Name">
</div>
</div>
<div>
<label>Password:</label>
<div>
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div>
<label>Repeat Password:</label>
<div>
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button ng-disabled="error || incomplete" ng-click="saveUser()"> Save Changes</button>
</div>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}