Angular.js встроенное редактирование

Я пытаюсь найти лучший подход к встроенному редактированию с помощью angularjs. В моем случае это своего рода сетка данных с кнопкой «редактировать». Так что это внутри ng-repeat.

То, что я видел, люди делают, так это имеют как фактические данные, так и редактируемые входные данные в одной строке, при этом редактируемые входные данные скрыты и отображаются при нажатии кнопки редактирования.

Но это не кажется правильным. На мой взгляд, это бесполезный DOM.

Поэтому я подумал, что мне лучше сделать что-то подобное. Вы нажимаете кнопку редактирования, которая будет иметь директиву, которая 1) скроет <td> с данными 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, т.е.


jquery angularjs datagrid angularjs-directive inline-editing
person fxck    schedule 03.04.2013    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Внедрение нового шаблона — довольно дорогой способ, особенно если у вас много экземпляров вашего встроенного редактора.

Есть много способов сделать это, но самый чистый (и самый простой) — использовать один и тот же элемент для редактирования и отображения ваших данных и просто переключать его 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/.

person supermasher    schedule 03.04.2013
comment
.. с отключением я имел в виду, чтобы это выглядело так, как будто это не ввод с помощью css - person fxck; 03.04.2013
comment
Что касается поддержки браузера CSS, я не вижу у вас серьезных проблем с этим подходом. Что касается ваших плагинов, это кажется еще одной причиной, по которой вы не захотите каждый раз менять DOM, так как вам наверняка придется перепривязывать свои плагины. - person supermasher; 03.04.2013
comment
Да, но а) мне пришлось бы заставить все мои плагины не принимать клики, когда класс неактивен б) такие плагины, как select2, фактически скрывают исходный ввод и добавляют собственные элементы div, чтобы он не расслабьтесь. - person fxck; 03.04.2013
comment
Нерешенная проблема на самом деле сосредоточена вокруг проблем, которые не были указаны в вашем первоначальном вопросе. Я бы посоветовал вам принять мой ответ, поскольку он является хорошим решением вашего первоначального вопроса и может быть полезен кому-то еще, а затем задать новый вопрос, включая ваши дополнительные требования к плагину. В идеале вы также должны предоставить скрипку, если это возможно, чтобы увеличить ваши шансы на получение ответа. - person supermasher; 03.04.2013
comment
Я проверил несколько из них на SO, и этот мой любимый. Спасибо! - person jcollum; 30.08.2013

arrow_upward
2
arrow_downward

Привет, я знаю, что уже есть принятый ответ, но я наткнулся на это

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

недавно, и я считаю, что это очень достойный проект, посвященный редактируемым элементам управления в целом.

Надеюсь, это поможет кому-то.

person Byron    schedule 24.02.2014

arrow_upward
0
arrow_downward

Просто бросьте это туда, если вы использовали новую директиву ng-if, чтобы «скрыть» эти вводы редактирования и прочее, «много бесполезного DOM» больше не такая большая проблема, поскольку ng-if не отображает html вообще.

person fxck    schedule 18.07.2013