9

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

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

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

所以我想我会更好地做这样的事情。您单击编辑按钮，该按钮将有一个指令，它将 1）隐藏<td>with 数据 2）找到按钮的父级，应该是<tr>，并在其中注入一个模板 3）在保存时删除那些编辑<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 的方式不适合你，那就是。

4

3 回答 3

11

注入一个新的模板是一种相当昂贵的做事方式，尤其是当你有很多内联编辑器的实例时。

有很多方法可以做到这一点，但最简洁（也是最简单）的是使用相同的元素来编辑和显示您的数据，并使用指令简单地切换它的 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/。

于 2013-04-03T11:15:11.183 回答
2

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

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

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

希望它对某人有所帮助。

于 2014-02-24T10:27:58.357 回答
0

只是把它扔在那里，如果你使用新ng-if指令来“隐藏”那些编辑输入和东西，“很多无用的 DOM”不再是一个问题，因为 ng-if 不会在全部。

于 2013-07-18T10:05:32.370 回答