Javascript 角度内联编辑表单例
我试图为表创建内联编辑(类似于),但我希望一次只允许编辑一行。当前,您可以选择任意数量的行以处于编辑模式 选项Javascript 角度内联编辑表单例,javascript,css,angularjs,html-table,inline-editing,Javascript,Css,Angularjs,Html Table,Inline Editing,我试图为表创建内联编辑(类似于),但我希望一次只允许编辑一行。当前,您可以选择任意数量的行以处于编辑模式 选项 将行列表保持在编辑模式下,一旦选择要编辑的新行,循环浏览列表并强制退出编辑模式,将请求行置于编辑模式并将其添加到列表中。这基本上允许列表中最多有一行,导致一次只能编辑一行。但我没有演示如何将行移出编辑模式 有一个退出编辑模式的取消按钮。因此,可以使用jquery(或angular.element)获取所有取消按钮的列表,然后实际地单击它们——再次,在编辑模式下强制退出行,但这可能会降低
名称
年龄
行动
{{contact.name}
{{contact.age}
以下是plunker演示(允许所有行处于编辑模式):`
这是一个我想要实现的工作演示,但它使用的是模板。它调用getTemplate的次数太多,我不喜欢(每次运行摘要时都调用它—单击按钮、键入、显示工具提示)。
您可以使用
$index
变量(已内置于ng repeat操作中)将ng repeat操作的索引像这样传递给您的editContact
函数:
您可以看到,在editContact
按钮中,ind
变量是单击的当前编辑按钮的索引
下面是一个例子:我能够通过将editContact和reset函数更新为以下内容来获得所需的结果:
$scope.editContact = function(contact, event) {
// Nothing first time, but will have an element second time
$timeout(function() {
// Click the element and remove the class since it is not in edit mode anymore
angular.element('.row-edit-mode').triggerHandler('click');
angular.element('.row-edit-mode').removeClass('row-edit-mode');
// If it is not a button, then it is the fa-icon, so get its parent, which is a button
var eventElement = angular.element(event.target).is('button') ? event.target : event.target.parentNode;
// Find it's sibling with given id, and add a class to it
angular.element(eventElement).siblings("#table-cancel").addClass('row-edit-mode')
$scope.model.selected = angular.copy(contact);
});
};
$scope.reset = function() {
// Remove class on cancel
angular.element('.row-edit-mode').removeClass('row-edit-mode');
$scope.model.selected = {};
};
我仍然看到开关之间有轻微的闪烁,所以如果有人有建议让它更平滑,我会非常感激
如果我在几天内没有看到其他答案达到预期结果,我会将此答案标记为已接受。谢谢所有提供帮助的人 很好的解决方法。我将“重做显示”循环移动到重置功能,因为取消编辑也会显示所有按钮()。但正如您在使用模板的演示中所看到的,理想的期望是显示所有按钮,并能够在其他行上单击编辑,而无需保存/取消只需将元素更改为显示,并将(
eles
)更改为输入文本框。此外,还必须为包含内容的跨度添加类名。虽然逻辑应该是相同的,但仍然没有达到预期的结果(显示所有数据和按钮,并且能够单击任何编辑按钮进入对应行的编辑模式)。请看我的答案,如果您有任何反馈,我们非常欢迎和感谢!谢谢你的帮助!
var eles = document.getElementsByClassName('edit-btn');
$scope.editContact = function (contact, ind) {
$scope.model.selected = angular.copy(contact);
//remove display of other buttons
for(var i = 0; i < eles.length; i++){
if(i != ind){
eles[i].style.display = "none";
}
}
};
$scope.saveContact = function (idx) {
console.log("Saving contact");
$scope.model.contacts[idx] = angular.copy($scope.model.selected);
//redo display of all buttons
for(var i = 0; i < eles.length; i++){
eles[i].style.display = "block";
}
$scope.reset();
};
$scope.editContact = function(contact, event) {
// Nothing first time, but will have an element second time
$timeout(function() {
// Click the element and remove the class since it is not in edit mode anymore
angular.element('.row-edit-mode').triggerHandler('click');
angular.element('.row-edit-mode').removeClass('row-edit-mode');
// If it is not a button, then it is the fa-icon, so get its parent, which is a button
var eventElement = angular.element(event.target).is('button') ? event.target : event.target.parentNode;
// Find it's sibling with given id, and add a class to it
angular.element(eventElement).siblings("#table-cancel").addClass('row-edit-mode')
$scope.model.selected = angular.copy(contact);
});
};
$scope.reset = function() {
// Remove class on cancel
angular.element('.row-edit-mode').removeClass('row-edit-mode');
$scope.model.selected = {};
};