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

Question

在没有DOM操作的情况下，如何通过双击制作可编辑的表格单元格？

我正在努力做到http://jsfiddle.net/bobintornado/F7K63/35/？

我的控制器代码如下

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

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

如果有人能分享他们的智慧，非常感谢！

PS：我认为 Parse.com 中的数据浏览器的可编辑表是我能得到的最好的演示，但我不知道如何实现它。

Answer 1

我更新了the fiddle。这是你想要的吗？

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

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

Answer 2

我不太喜欢重复元素的解决方案，所以我尝试了另一种方法，它运行良好且模型不复杂。

这是我第一次投稿，希望大家喜欢！

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

HTML

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

控制器

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

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