如何使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?

我试图让它有​​<一个href=\"http://jsfiddle.net/bobintornado/F7K63/35/\">http://jsfiddle.net/bobintornado/F7K63/35/?

我的控制器code低于

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

不过，我现在面临的问题，以输入元素只读和提交输入（上输入pressed事件火了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屋！