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

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

如果没有DOM操作，如何通过双击创建可编辑的表格单元格？

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

我试图在那里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)

但是我面临的问题是使输入元素只读并“提交”输入（在输入按下的事件时启动ajax调用以消耗一些Restful服务来更新后端服务器）

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.

PS：我认为Parse.com中可编辑的数据浏览器表是我能得到的最好的演示，但我没有关于如何实现它的线索。

2 个解决方案

#1

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

我更新了小提琴。这是你想要的吗？

HTML

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

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.

但是，您应该创建一个包含可编辑行的指令。当你点击一个项目时，在那里实现自动对焦。

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

我使用ng-readonly条件来保护输入。 Ng-repeat为迭代的每个元素分配$ index，因此我为ng-repeat创建了一个条件，以检查元素的$ index是否与$ scope.eEditable变量匹配。然后用ng-dblclick我可以为$ scope.eEditable分配点击元素的$ index。

HTML

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

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

控制器中的一行和视图中的两个指令，简单且有效