如何以 AngularJS 的方式制作双击可编辑表格? [英] How to make a double click editable table in AngularJS way?

问题描述

没有DOM操作，如何通过双击制作可编辑的表格单元格?

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

我正在努力做到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 服务来更新后端服务器)

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:我认为 Parse.com 中的可编辑数据浏览器表是我能得到的最好的演示，但我不知道如何实现它.

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.

推荐答案

我更新了小提琴.这是你想要的方式吗?

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

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

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

这篇关于如何以 AngularJS 的方式制作双击可编辑表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！