In Line Editing

In Line Editing, Custom Directives

by Pankaj Sapkal

HTML

<body ng-app="plunker">
    <div ng-controller="MainCtrl">
         <h1>In Line Editing in List</h1>

        <p>Click on a title or edit link to edit. Cancel edit and changes should revert to previous value. Press save to trigger some other handler.</p>
        <ul>
            <li ng-repeat="todo in todos" inline-edit="todo.title" on-save="updateTodo(todo.title)" on-cancel="cancelEdit(todo.title)">
                <div>
                    <input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
                    <button ng-click="cancel()" ng-show="editMode">cancel</button>
                    <button ng-click="save()" ng-show="editMode">save</button> <span ng-hide="editMode" ng-click="edit()" ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">{{model}}
        <a ng-show="showEdit" ng-click="edit()">edit</a>
            </span>

                </div>
            </li>
        </ul>
            <pre>UpdatedField: {{todos|json}}</pre>
    </div>
        <h1>In Line Editing in Table</h1>
    <div ng-controller="AppKeysCtrl">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th></th>
                    <th>Created</th>
                    <th>App Key</th>
                    <th>Name</th>
                    <th>Level</th>
                    <th>Active</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="entry in appkeys" data-ng-class="{danger:!entry.active}">
                    <td>{{$index + 1}}</td>
                    <td>{{entry.timestamp | date:'mediumDate'}}</td>
                    <td>{{entry.appkey}}</td>
                    <td> <span data-ng-hide="editMode">{{entry.name}}</span>

                        <input type="text" data-ng-show="editMode" data-ng-model="entry.name" data-ng-required on-enter="save()" on-esc="editMode = false;" />
                   ...

JavaScript

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

app.controller('MainCtrl', function ($scope) {

    $scope.updateTodo = function (value) {
        console.log('Saving title ' + value);
        alert('Saving title ' + value);
    };

    $scope.cancelEdit = function (value) {
        console.log('Canceled editing', value);
        alert('Canceled editing of ' + value);
    };

    $scope.todos = [{
        id: 123,
        title: 'Lord of the things'
    }, {
        id: 321,
        title: 'Hoovering heights'
    }, {
        id: 231,
        title: 'Watership brown'
    }];
});

function AppKeysCtrl($scope, $http, $location) {
    var tmpDate = new Date();

    $scope.newField = {};
    $scope.editing = false;

    $scope.appkeys = [{
        "appkey": "0123456789",
            "name": "My new app key",
            "created": tmpDate
    }, {
        "appkey": "abcdefghij",
            "name": "Someone elses app key",
            "created": tmpDate
    }];

    $scope.editAppKey = function (field) {
        $scope.editing = $scope.appkeys.indexOf(field);
        $scope.newField = angular.copy(field);
    }

    $scope.saveField = function (index) {
        if ($scope.editing !== false) {
            $scope.appkeys[$scope.editing] = $scope.newField;
            $scope.editing = false;
        }
    };

    $scope.cancel = function (index) {
        if ($scope.editing !== false) {
            $scope.appkeys[$scope.editing] = $scope.newField;
            $scope.editing = false;
        }
    };
}

// On esc event
app.directive('onEsc', function () {
    return function (scope, elm, attr) {
        elm.bind('keydown', function (e) {
            if (e.keyCode === 27) {
                scope.$apply(attr.onEsc);
            }
        });
    };
});

// On enter event
app.directive('onEnter', function () {
    return function (scope, elm, attr) {
        elm.bind('keypress', function (e) {
            if (e.keyCode === 13) {
                scope.$apply(attr.onEnter);
       ...