trNgGrid - Basic

by Ratan Paul

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.0.3/slate/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
<link rel="stylesheet" href="//moonstorm.github.io/trNgGrid/release/trNgGrid.min.css">
<script src="//moonstorm.github.io/trNgGrid/release/trNgGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.9/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.9/js/xeditable.js"></script>
<body ng-app="myApp">
    <div ng-controller="MainCtrl">
        <table tr-ng-grid='' items='myItems' page-items="5" class="table table-hover" >
            <thead>
            <tr>
                <th field-name="name" ></th>
                <th field-name="age" ></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-form="" editable-form="" name="rowform" onbeforesave="saveUser($data, gridItem.id)" shown="newFormData == gridItem">

                <td field-name="name">
                                <span editable-text="gridItem.name" e-name="name" e-form="rowform">
                                    {{ gridDisplayItem.name || 'empty' }}
                                </span>
                </td>
                <td field-name="age">
                                <span editable-text="gridItem.age" e-name="address" e-form="rowform">
                                    {{ gridDisplayItem.age || 'empty' }}
                                </span>
                </td>
                <td>
                    <div>
                        <div ng-show="rowform.$visible" class="form-buttons form-inline">
                            <button type="button" ng-disabled="rowform.$waiting" class="btn btn-primary" ng-click="rowform.$submit()">
                                save
                            </button>
                            <button type="button"...

JavaScript

angular
        .module('myApp', ['trNgGrid','xeditable'])
        .controller("MainCtrl", ["$scope", function ($scope) {
            $scope.myItems = [{name: "Moroni", age: 50},
                     {id: 1, name: "Tiancum", age: 43},
                     {id:2, name: "Jacob", age: 27},
                     {id:3, name: "Nephi", age: 29},
                     {id:4, name: "Enos", age: 99}];
             $scope.saveUser = function(data, rowItem)
                    {
                        console.log(data, rowItem);
                    }
            }]);