index_second.html

<html lang="en" >
<head>
<title>Angular Study</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- cdn bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- custom css -->
  <style type="text/css">

  </style>
  <!-- end css -->
  <script src="js/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.8/angular-resource.js"></script> -->
</head>
<body ng-app="employees" ng-controller="employeesCtrl">
<div class="container">
<div class="row">
<h3>Input Employees</h3>
<div class="col-xs-5">
<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name" ng-model="employee.name">
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Address" ng-model="employee.address">
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Birthday" ng-model="employee.birthday">
  </div>
  <div class="form-group">
<div class="dropdown">
  <a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
    <div class="input-group"><input type="text" class="form-control" data-ng-model="data.dateDropDownInput"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <datetimepicker data-ng-model="data.dateDropDownInput" data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }"/>
  </ul>
</div>
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Gender" ng-model="employee.gender">
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Email" ng-model="employee.email">
  </div>
  <button ng-click="save(employee)" class="btn btn-primary">Create Employee </button>
  <button ng-click="index()" class="btn btn-primary">List Employee</button>
</form>
<div>{{ employees.message }}</div>
</div>
 <div class="col-xs-7">
<table class="table table-hover">
  <thead>
      <tr>
          <th width="50px">ID</th>
          <th width="150px">Name</th>
          <th width="150px">Email</th>
          <th width="150px">Action</th>
      </tr>
  </thead>
  <tbody style="text-align: center;">
      <tr ng-repeat="employee in employees">
          <td>{{ employee.id }}</td>
          <td>{{ employee.name }}</td>
          <td>{{ employee.address }}</td>
          <td>  
            <button ng-click="show(employee.id)" class="btn btn-info btn-s" data-toggle="modal" data-target="#myModal">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </button>
            <button ng-click="edit(employee.id)" class="btn btn-warning btn-s" data-toggle="modal" data-target="#myModal_edit">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button ng-click="delete(employee.id)" class="btn btn-danger btn-s">
              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
            </button>
          </td>
      </tr>
  </tbody>
  </table>
 </div>
</div>
</div>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button> -->

<!-- Modal -->
<!-- Modal Detail -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Detail Employee</h4>
      </div>
      <div class="modal-body">
        <table class="table table-hover" border="0">
          <tr><td>ID</td><td>{{ employees.employee.id }}</td></tr>
          <tr><td>Name</td><td>{{ employees.employee.name }}</td></tr>
          <tr><td>Birthday</td><td>{{ employees.employee.birthday }}</td></tr>
          <tr><td>Gender</td><td>{{ employees.employee.gender }}</td></tr>
          <tr><td>Email</td><td>{{ employees.employee.email }}</td></tr>
          <tr><td>Address</td><td>{{ employees.employee.address }}</td></tr>
        </table>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>
<!-- Modal Edit -->
<div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Detail Employee</h4>
      </div>
      <div class="modal-body">
      <form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Name" ng-model="employees.employee.name">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Address" ng-model="employees.employee.address">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Birthday" ng-model="employees.employee.birthday">
      </div>
      <!-- <div class="form-group">
      <div class="dropdown">
        <a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
          <div class="input-group"><input type="text" class="form-control" data-ng-model="data.dateDropDownInput"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
          </div>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <datetimepicker data-ng-model="data.dateDropDownInput" data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }"/>
        </ul>
      </div>
      </div> -->
        <div class="form-group">
        <input type="text" class="form-control" placeholder="Gender" ng-model="employees.employee.gender">
<!--         <div class="checkbox">
          <label>
            <input type="checkbox" name="male" ng-model="employees.employee.gender">Pria
            <input type="checkbox" name="female" ng-model="employees.employee.gender"> Wanita
          </label>
        </div> -->
      </div>
        <div class="form-group">
        <input type="text" class="form-control" placeholder="Email" ng-model="employees.employee.email">
      </div>
      <button ng-click="update(employees.employee.id)" class="btn btn-primary">Update</button>
    </form>
        
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>
<!-- js http get url serve -->
<script src="js/module-http.js" type="text/javascript"></script>
<!-- end http -->
<!-- <script src="js/routes.js" type="text/javascript"></script> -->
<!-- Your application bootstrap  -->
<script type="text/javascript">    
  // js call modal
  $('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
  })

  // js dtpicker
  //  $( function() {
  //   $( "#datepicker" ).datepicker({
  //     changeMonth: true,
  //     changeYear: true,
  //     dateFormat: 'yy/mm/dd'
  //   });
  // } );

</script>
</body>
</html>