在没有DOM操作的情况下,如何通过双击制作一个可编辑的表格单元格?
我正在努力做到这一点 http://jsfiddle.net/bobintornado/F7K63/35/ ?
我的 Controller 代码如下
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 中的数据浏览器的可编辑表格是我能得到的最好的演示,但我不知道如何实现它。
最佳答案
我更新了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...
};
然而,您可能应该创建一个包含可编辑行的指令。并在那里实现自动对焦,当你双击一个项目时。
关于javascript - 如何以AngularJS方式制作双击可编辑表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21794575/