Angular.js 内联编辑

Posted 2023-02-22

【中文标题】Angular.js 内联编辑

【英文标题】：Angular.js inline-editing

【发布时间】：2013-03-24 23:40:18

【问题描述】：

我正在尝试找到使用 angularjs 进行内联编辑的最佳方法。就我而言，它是一种带有“编辑”按钮的数据网格。所以它在 ng-repeat 里面。

我看到人们所做的是将实际数据和编辑输入放在同一行中，编辑输入被隐藏并在单击编辑按钮时显示。

但这似乎不对。在我看来，这是很多无用的 DOM。

所以我想我会更好地做这样的事情。您单击编辑按钮，它将有一个指令，它将 1) 隐藏带有数据的 <td> 2) 找到按钮的父级，应该是 <tr>，并在其中注入一个模板 3) on保存删除那些编辑<td>s 并再次显示数据<td>s。

所以我开始制作指令，里面有 element.click() 函数，它

// found the parent
var parent = element.closest('tr');
// found all the data tds
var tds = parent.find('td');
// hidden them  
tds.hide();

现在问题来了，接下来我想做这样的事情

// append input with editing tds into parent
parent.append('<td><input type="text" ng-model="entry.name" /> entry.name </td>');

但是它不会绑定甚至解析 吗？我必须使用什么方法而不是 jquery 的追加？

关于指令的文档是这样说的

模板元素 - 声明指令的元素。 对元素和子元素进行模板转换是安全的 仅元素。

所以我不能在 element.parent() 上使用模板转换

如果我在<tr> 上制定指令会有帮助吗？即使我这样做了，我也会转换我的整个<tr>，这意味着我丢失了原始模板，我必须有另一个指令或将其转换回原始状态的东西..不是吗？

编辑

因为这个问题似乎很受欢迎.. 首先我最初担心每次 ng-repeat 迭代渲染额外元素是没有根据的，因为 1) 你可以使用 ng-if，这意味着它不会被渲染，直到条件满足真的 2) 你可以按照我的意图附加一个模板，然后只需使用 $compile 就可以了，它肯定不会“昂贵”，因为你只是为了一个元素。有很多方法可以解决这个问题，但 ng-if 是最简单的，如果 supermasher 的方法不适合你，那就是。

【参考方案1】：

注入新模板是一种相当昂贵的处理方式，尤其是当您的内联编辑器实例很多时。

有很多方法可以做到这一点，但最简洁（也是最简单）的是使用相同的元素来编辑和显示您的数据，然后使用指令简单地切换它的 CSS 以更改它在两种状态下的显示方式，例如所以：

myApp.directive('inlineEdit', function () 

return function (scope, element, attrs) 
    element.bind('click', function () 

        if (element.hasClass('inactive')) 
            element.removeClass('inactive');
         else 
            element.addClass('inactive');
            $(element).blur()
        
    );
;

);

查看这个小提琴以获得完整的工作示例：http://jsfiddle.net/3EaY8/。

【讨论】：

..禁用我的意思是让它看起来不是css的输入

在 CSS 浏览器支持方面，我认为您对这种方法没有任何重大问题。就您的插件而言，这似乎是您不想每次都更改 DOM 的另一个原因，因为您肯定也必须重新绑定您的插件。

是的，但是 a) 我必须让我的所有插件 not 在类处于非活动状态时接受点击 b) 像 select2 这样的插件实际上隐藏了原始输入，并附加自己的 div，所以这并不容易。

悬而未决的问题实际上集中在原始问题中未说明的问题上。我建议您接受我的回答，因为它是您原始问题的一个很好的解决方案，并且可能对其他人有用，然后提出一个新问题，包括您的附加插件要求。理想情况下，您还应该尽可能提供小提琴以增加获得答案的机会。

我已经在 SO 上查看了其中的几个，这个是我最喜欢的。谢谢！

【参考方案2】：

只要把它扔在那里，如果你使用新的ng-if 指令来“隐藏”那些编辑输入和东西，“很多无用的 DOM”就不再是什么问题了，因为 ng-if 没有根本不渲染 html。

【参考方案3】：

您好，我知道已经有一个公认的答案，但我偶然发现了这个

http://vitalets.github.io/angular-xeditable/

最近，我相信这是一个非常体面的项目，可以处理一般的可编辑控件。

希望对某人有所帮助。