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.

Please fill in the form and submit to subscribe

Welcome to VShakya

For this week my all price is very low !

Don't miss to get my services

Thanks

 

Contact us