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

一尘不染

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

angularjs

如果没有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中数据浏览器的可编辑表是我可以获得的最佳演示，但是我不知道如何实现它。

阅读 432

2020-07-04

共1个答案

一尘不染

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

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

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

但是，您可能应该创建一个包含可编辑行的指令。当您双击某个项目时，在其中实现自动对焦。

2020-07-04