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">
        <p>
            <table id="grid" ng-table="tableParams" show-filter="true" class="table">
                <tr ng-repeat="user in $data" ng-click="user.$selected = true; changeSelection(user)" ng-class="{'active': user.$selected}" ng-form name="urlForm">
                    <td data-title="'Sample'"><input type="checkbox" ng-model="user.selected"></td>
                    <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }"> <span ng-show='!user.$edit'>{{user.name}}</span>
 <span ng-show='user.$edit'><input type=text ng-model="temp.name" ng-required="true" /></span>

                    </td>
                    <td data-title="'Surname'" sortable="'surname'" filter="{ 'surname': 'text' }"> <span ng-show='!user.$edit'>{{user.surname}}</span>
 <span ng-show='user.$edit'><input type=text ng-model="temp.surname" /></span>

                    </td>
                    <td data-title="'Date of birth'" sortable="'dob'" filter="{ 'dob': 'text' }"> <span ng-show='!user.$edit'>{{user.dob | date:'yyyy/MM/dd'}}</span>
 <span ng-show='user.$edit'><input  required  placeholder="yyyy/MM/dd" type="text" ng-model="temp.dob" /></span>

                    </td>
                    <td data-title="'Email'" sortable="'email'" filter="{ 'email': 'text' }"> <span ng-show='!user.$edit'>{{user.email}}</span>
 <span ng-show='user.$edit'><input type=text...

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()
    };

   ...