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

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

我想去那里

我的控制器代码如下

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

然而，我面临的问题是如何使输入元素成为只读并“提交”输入（在按下enter键时，启动ajax调用以使用一些Restful服务来更新后端服务器）

如果有人能分享他们的智慧，我们将不胜感激

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

我更新了。你想这样做吗

HTML

---

但是，您可能应该创建一个包含可编辑行的指令。并在单击项目时在此处实现自动聚焦

我不太喜欢复制的元素解决方案，所以我尝试了另一种方法，它工作得很好，不会使模型复杂化

这是我的第一个贡献，所以我希望你们喜欢男生

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

HTML

---

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

这太棒了！我正在努力使用单个输入元素来实现这一点，但在其中添加另一个跨度似乎是无害的。我想将来我会实现一个像td editable for fast replicate这样的指令。这个实现非常好，唯一的问题是当您编辑字段并删除所有字符时，没有办法将其重新编辑：/@AlejandroLozdziejski将双击侦听器放在

td

或

tr

上，即使您有一个空值，您仍然可以编辑它，这是一个非常简洁的解决方案！也许我们可以调用变量$scope.editingIndex？如果我们想支持多行编辑，可以使用$scope.editingIndexArray？但是复制仍然给你更多的灵活性和分离，这有时是好的。当然是一个限制！我得到这个解决方案是因为我的问题不允许多版本。对于多行版本保持一个干净的模型，我们需要复杂的控制器。。。在这种情况下，您的解决方案将是干净的，您可以将其缩短，而无需在$scope中创建变量。将属性附加到项目：

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

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

<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