Home / Angular.js / AngularJS and TwitterBootstrap

AngularJS and TwitterBootstrap

Create a javascript file and save it in file myUsers.js

Select Code
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

Select Code
<!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>&nbsp;&nbsp;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

Select 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();
?>

About v.shakya

I am V.Shakya, Freelance PHP Programmer. I like to share my ideas, views and knowledge to all of you who come across my website. I am young, enthusiastic, highly motivated and self disciplined person. I completed my studies in Master of Computer Application and currently giving my technical expertise to one of the Big IT company. I have more than Ten years of experience in vast field of Programming , Designing and Development of websites and various software's.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Welcome to VShakya

For this week my all price is very low !

Don't miss to get my services

Thanks

 

Contact us