Edit Example

by davekr

HTML

<!DOCTYPE html>
<div ng-app ng-controller="myCtrl" class="container">Double-click on the items below to edit:
    <button type="button" ng-click="newItem()">Add item</button>
        <table>
        <tr ng-repeat="item in items">
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.name}}</span>
                <input ng-show="item.editing" ng-model="item.name" ng-blur="doneEditing(item)" autofocus />
            </td>
        </tr>
        </table>
</div>

CSS

.container {
    margin-top:10px;
    font-family:arial;
}
input:focus {
    //change more attributes, if you want.
}
input {
    border:none;
    background-color:transparent;
}
.container header {
    padding-bottom:20px;
    border-bottom:1px solid black;
}
ul, input, .container {
    padding:10px;
}

JavaScript

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
        editing: false
    }, {
        name: "item #2",
        editing: false
    }, {
        name: "item #3",
        editing: false
    }];

    $scope.editItem = function (item) {
        item.editing = true;
    }

    $scope.doneEditing = function (item) {
        item.editing = false;
        //dong some background ajax calling for persistence...
    };
}