Angular - Ng-Table

by gangadharjannu

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.2/ng-table.css">
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.2/ng-table.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<form>
  <div class="error">
  </div>
  <div ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="tableParams" class="table" show-filter="true">
      <tr ng-repeat="job in $data" class="table-highlight" ng-class="{deactivated: job.is_active == 'No'}">
        <td data-title="'Sample'">
          <input type="checkbox" ng-model="job.selected">
        </td>
        <td data-title="'QC ID'" sortable="'id'"><a href="#/jobs/{{job.id}}">{{job.id}}</a></td>
        <td data-title="'Date Submitted'" sortable="'dateJob'">{{job.dateJob}}</td>
      </tr>
    </table>
  </div>
</form>

CSS

body {
  padding: 10px !important;
}

input.ng-invalid.ng-dirty {
  background-color: #FA787E;
}

input.ng-valid.ng-dirty {
  background-color: #78FA89;
}

#grid tr.active {
  color: blue;
}

input[type=text] {
  border: 1px blue solid;
  margin: 0;
  width: 100%;
  padding: 0;
}

#grid td {
  align: center;
  text-align: center;
}

thead tr:nth-child(2) {
  background-color: gray;
  ;
  padding: 0;
  margin: 0;
  border: 0;
}

thead tr:nth-child(2) th {
  background-color: gray;
  ;
  padding: 0;
  margin: 0;
  border: 0;
}

thead tr:nth-child(2) th input {
  padding: 0;
  margin: 0;
  border: 1px solid gray;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

tbody tr:nth-child(even) {
  background-color: rgba(0, 255, 0, 0.073);
}

table {
  border: 1px solid gray;
}

JavaScript

if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function() {};

var app = angular.module('main', ['ngTable']);

app.directive('datepicker', function() {

  return {
    restrict: 'A',
    require: '?ngModel', // get a hold of NgModelController
    link: function($scope, $element, $attrs, ngModel) {

      $element.datepicker({
        dateFormat: 'yy/mm/dd',
        onSelect: function(date) {
          $scope.$apply(function() {
            ngModel.$setViewValue(date);
          });
        }
      });
    }
  };
});



app.controller('DemoCtrl', function($scope, $filter, ngTableParams, $timeout) {

  $scope.temp = {};

  var data = [];

  for (i = 0; i < 200; i++) {
    data.push({
      name: "John" + i,
      surname: "Doe95" + i,
      dob: new Date(1901, 12, 12),
      email: "[email protected]",
      selected: false
    });
  }

  $scope.changeSelection = function(user) {
    data.forEach(function(u) {
      if (user !== u) {
        u.$selected = false;
        u.$edit = false;
      }
    });
  }

  $scope.editUser = function(user) {
    user.$edit = !user.$edit;
    user.$selected = true;
    user.$valid = true;

    for (index in user) {
      $scope.temp[index] = user[index];
    }
  };

  $scope.saveUser = function(user, form) {
    console.log('saveUser');
    var s = $scope;

    for (index in user) {
      user[index] = $scope.temp[index];
    }
    user.$edit = false;
    console.log('end editing', user.$edit);
    form.$setPristine()

  };
  $scope.cancel = function(user, form) {
    var s = $scope;
    user.$edit = false;;
    for (index in user) {
      $scope.temp[index] = null;
    }
    form.$setPristine()
  };

  $scope.deleteUser = function(user) {
    alert('deleted ;)');
    user.$selected = false;
  };

  $scope.tableParams = new ngTableParams({
    page: 1, // show first page
    count: 10, // count per page
    sorting: {
      name: 'asc' // initial sorting
    },
    filter: {
      name: '' //...