AngularJS - Undo edit

by kappa

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div data-ng-controller="MyController">
    <table>
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Fruit
                </th>
                <th>
                    &nbsp;
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="item in items">
                <td>
                    {{item.id}}
                </td>
                <td>
                    <span data-ng-bind="item.fruit" data-ng-show="!item.isEditing"></span>
                    <select data-ng-model="item.fruit" data-ng-options="fruit for fruit in fruits" data-ng-show="item.isEditing"></select>
                </td>
                <td>
                    <input data-ng-click="beginEdit(item)" data-ng-show="!item.isEditing" type="button" value="Edit" />
                    <input data-ng-click="saveEdit(item)" data-ng-show="item.isEditing" type="button" value="Save" />
                    <input data-ng-click="cancelEdit(item)" data-ng-show="item.isEditing" type="button" value="Cancel" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var module = angular.module("MyModule", []);

module.controller("MyController", ["$scope", function ($scope) {
    $scope.fruits = ["Apple", "Banana", "Citrus"];
    $scope.items = [{id: 1, fruit: "Apple"}, {id: 2, fruit: "Banana"}, {id: 3, fruit: "Citrus"}];
    
    $scope.beginEdit = function (item) {
        item.isEditing = true;
        item.oldFruit = item.fruit;
    };
    
    $scope.saveEdit = function (item) {
        item.isEditing = false;
        // TODO: Save edit.
    };
    
    $scope.cancelEdit = function (item) {
        item.isEditing = false;
        item.fruit = item.oldFruit;
    };
}]);

angular.bootstrap(document, ["MyModule"]);