V.Shakya Software Developer & Consultant 
Create a javascript file and save it in file myUsers.js
angular.module('myApp', []).controller('userController', ['$scope','$http', function($scope, $http) { |
|
$scope.fname = ''; |
|
$scope.lname = ''; |
|
$scope.passw1 = ''; |
|
$scope.passw2 = ''; |
|
$http.get("result.php").success(function (response) { |
|
$scope.users =response; |
|
}); |
|
$scope.edit = true; |
|
$scope.error = false; |
|
$scope.incomplete = false; |
|
$scope.editUser = function(id) { |
|
if (id == 'new') { |
|
$scope.edit = true; |
|
$scope.incomplete = true; |
|
$scope.fname = ''; |
|
$scope.lname = ''; |
|
} else { |
|
$scope.edit = false; |
|
$scope.fname = $scope.users[id-1].fname; |
|
$scope.lname = $scope.users[id-1].lname; |
|
}
|
|
};
|
|
$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 !== $scope.passw2) { |
|
$scope.error = true; |
|
} else { |
|
$scope.error = false; |
|
}
|
|
$scope.incomplete = false; |
|
if ($scope.edit && (!$scope.fname.length || |
|
!$scope.lname.length || |
|
!$scope.passw1.length || !$scope.passw2.length)) { |
|
$scope.incomplete = true; |
|
}
|
|
};
|
|
}]); |
Create a html file with the following code and save it in user.html
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> |
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> |
|
<style> |
|
.hide{display:none;} |
|
</style> |
|
</head> |
|
<body ng-app="myApp" ng-controller="userController"> |
|
<div class="container"> |
|
<h3>Users</h3> |
|
<table class="table table-striped"> |
|
<thead> |
|
<tr> |
|
<th>Edit</th> |
|
<th>First Name</th> |
|
<th>Last Name</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr ng-repeat="user in users"> |
|
<td><button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span> Edit </button></td> |
|
<td>{{ user.fname }}</td> |
|
<td>{{ user.lname }}</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<hr> |
|
<button class="btn btn-success" ng-click="editUser('new')"> <span class="glyphicon glyphicon-user"></span> Create New User </button> |
|
<hr> |
|
<h3 ng-show="edit">Create New User:</h3> |
|
<h3 ng-hide="edit">Edit User:</h3> |
|
<div class="hides"> |
|
<form class="form-horizontal"> |
|
<div class="form-group"> |
|
<label class="col-sm-2 control-label">First Name:</label> |
|
<div class="col-sm-10"> |
|
<input type="text" ng-model="fname" ng-disabled="!edit" placeholder="First Name"> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<label class="col-sm-2 control-label">Last Name:</label> |
|
<div class="col-sm-10"> |
|
<input type="text" ng-model="lname" ng-disabled="!edit" placeholder="Last Name"> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<label class="col-sm-2 control-label">Password:</label> |
|
<div class="col-sm-10"> |
|
<input type="password" ng-model="passw1" placeholder="Password"> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<label class="col-sm-2 control-label">Repeat:</label> |
|
<div class="col-sm-10"> |
|
<input type="password" ng-model="passw2" placeholder="Repeat Password"> |
|
</div> |
|
</div> |
|
</form> |
|
<hr> |
|
<button class="btn btn-success" ng-disabled="error || incomplete"> <span class="glyphicon glyphicon-save"></span> Save Changes </button> |
|
</div> |
|
</div> |
|
<script src = "myUsers.js"> </script> |
|
</body> |
|
</html> |
Create a php file with the following code
<?php
|
|
header("Access-Control-Allow-Origin: *"); |
|
header("Content-Type: application/json; charset=UTF-8"); |
|
$conn = new mysqli("localhost", "root", "", "angular"); |
|
$res = $conn->query("SELECT id, fname, lname FROM users"); |
|
$result = array(); |
|
while($row=mysqli_fetch_assoc($res)){ |
|
$result[] = $row; |
|
}
|
|
echo json_encode($result); |
|
$conn->close(); |
|
?>
|
