Inline Edit

by tidelipop

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<div ng-app="MyApp" ng-controller="UserAdminCtrl" class="area">

    <form class="form">
        
        <div class="media">
            <label class="left">UserID:</label>
            <span inline-edit="data_copy.user.user_id"></span>

            <label class="left">Comment:</label>
            <span inline-edit="data_copy.user.comment" type="textarea"></span>

            <label class="left">My car:</label>
            <span inline-edit="data_copy.user.my_car" type="selectbox" options="options.cars"></span>
        </div>
        
    </form>
    
    <hr />
    
    <pre>{{data_copy | json}}</pre>

</div>

CSS

/* ====== media ====== */
.media {margin:10px;}
.media, .body {overflow:hidden; _overflow:visible; zoom:1;}
.media .left {float:left; margin-right: 10px;}
.media .left img{display:block;}
.media .right{float:right; margin-left: 10px;}

.form .media .left{
    width: 80px;
}

.form-row>textarea{
    float: left;
    width: 100px;
}

JavaScript

angular.module('MyApp', [])

.filter("placeholder", function(){
    return function (text, length, end) {
        //console.log(typeof text, text, length);
        if(typeof text === 'undefined' || text === ''){
            text = 'Click to edit...';
        }
        return text;
    };
})

.directive("inlineEdit", function($compile, $q){
    var saveClicked = false;
    return {
        restrict: "A",
        replace: true,
        template: function(tElement, tAttrs){
            var modelStr = tAttrs.inlineEdit, optionsStr = tAttrs.options, modelXtra = '', editElStr = '';
            if(tAttrs.type === 'selectbox'){
                modelXtra = '.value';
                editElStr = '<select id="test" ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-keydown="save(\''+modelStr+'\', $event)" ng-model="'+modelStr+'" ng-options="a.value for a in '+optionsStr+'"></select>';
            }else if(tAttrs.type === 'textarea'){
                editElStr = '<textarea ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-keydown="save(\''+modelStr+'\', $event)" ng-model="'+modelStr+'"></textarea>';
            }else{
                editElStr = '<input type="text" ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-keydown="save(\''+modelStr+'\', $event)" ng-model="'+modelStr+'" />';
            }
            return '<div class="body">'+
                       '<span ng-hide="editMode" ng-click="startEdit(\''+modelStr+'\', \''+optionsStr+'\', $event);" ng-bind="'+modelStr+modelXtra+' | placeholder"></span>'+
                       editElStr+'<button ng-show="editMode" ng-mousedown="save(\''+modelStr+'\', $event)">save</button>'+
                   '</div>';
        },
        scope: true,
        controller: function($scope, $timeout){
            $scope.editMode = false;
            $scope.save = function(modelStr, $event){
                console.log("Saving...", $event);
                if($event.type === 'keydown'){
                   ...