如何以AngularJS方式制作双击可编辑表格？

Question

Without DOM manipulation, how to make an editable table cell with double click?

I am trying to make it there http://jsfiddle.net/bobintornado/F7K63/35/ ?

my controller code is below

function myCtrl($scope) {

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

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

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

However I am facing questions to make input element readonly and "submit" the input (on enter pressed event fire up the ajax call to consume some Restful service for updating backend server)

Many thank if anyone could share their wisdom!

PS: I think the editable table of data browser in Parse.com is the best demonstration I can get but I have no clues regarding how to implement it.

Answer 1

I updated the fiddle . Is this how you want to do it?

HTML

<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>

JS

$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...
};

However you should probably create a directive containing the editable row. And implement the autofocus there, when you dblclick on an item.

Answer 2

I don't like too much the duplicated-element solution so I tried another way and it's working perfectly without complicating the model.

This is my first contribution so I hope you like guys!

I use ng-readonly with a condition to protect the input. Ng-repeat assigns a $index to each element iterated so I created a condition for ng-repeat to check if the $index of the element matchs with the $scope.eEditable variable. Then with ng-dblclick I can assign to $scope.eEditable the $index of the element clicked.

HTML

<tr ng-repeat="item in items">
    <td>
         <input type="text" value="{{item.name}}" ng-readonly='!($index == eEditable)' ng-dblclick="eEditable = $index"/>
    </td>
</tr>

CONTROLLER

    $scope.eEditable= -1; //-1 by default. It doesn't match any $index from ng-repeat

One line in controller and two directives in the view, simple and it works