Angular XEditable Dialog

0

У меня есть приложение AngularJS, в котором я использую Xeditable для изменения значений таблиц "на лету". Я использую стандартный метод редактирования значений без отображения каких-либо кнопок и использования атрибута blur, чтобы быстро и последовательно отправлять все мои изменения.

<a href="#" buttons="no" blur="submit">{{ myValue }}</a>

Вместо подтверждения, которое рассматривается как кнопки, например, на бесчисленных примерах, они должны отображаться только в диалоговом окне при сохранении (onblur).

Из-за проблем с взаимодействием с пользователем я хотел бы показать диалог подтверждения, когда поле было изменено, а затем удалено (или когда поле выходит из состояния редактирования). В основном что-то в атрибуте onbeforesave =.

Это когда должно появиться подтверждение, информирующее этого пользователя о том, что значение было изменено и спрашивает, хотят ли они его сохранить или нет.

Я знаю, как вызывать функцию на событии onbeforesave, хотя, поскольку он лежит внутри контроллера, я не знаю, как вызвать диалог подтверждения.

Основные этапы:

  1. Пользователь Нажимает на значение ячейки таблицы
  2. Ячейка становится редактируемой.
  3. Пользователь изменяет значение ячейки.
  4. Пользователь щелкает вдали от ячейки.
  5. появляется небольшое диалоговое окно подтверждения (любое удобное для пользователя или ускоренное)
  6. Пользователь подтверждает или отменяет редактирование, которое было сделано.
  7. Промыть/повторить.

Любая помощь приветствуется.

Смотрите текущую скрипку

ОБНОВЛЕНИЕ: мои последние попытки привели меня к выполнению услуги углового dailog, которая решила мою первоначальную проблему выше, но я все еще не могу решить последнюю часть моего первоначального вопроса.

Нажав на ячейку, изменив значение и щелкнув, я получаю диалоговое окно (подтверждение), которое, когда я нахожусь, ДА вызовет мой api и сохранит значение - что работает. Однако при нажатии кнопки "НЕТ" мое значение остается в таблице. Теперь это значение необходимо вернуть к предыдущему значению. Любая помощь?

  • Теперь я использую атрибут onshow, чтобы сохранить текущее значение ячейки, редактируемой в области.
  • Я использую атрибут onbeforesave, чтобы запустить мой диалог и выполнить проверку Yes/No.

HTML:

<a href="#" editable-text="myValue" buttons="no" blur="submit" onbeforesave="launchDialog($data)" onshow="onShow($data)" >{{ myValue || 'empty' }}</a>

контроллер:

$scope.oldValue = "";

    $scope.onShow = function(data){
      $scope.oldValue = data;
      };

    $scope.launchDialog = function(data) {
      var dlg = null;
      dlg = dialogs.confirm('Value Changed','Do you want to save this change?');
      dlg.result.then(function(btn){

        //TODO: HIT API AND SAVE VALUE

      },function(btn){
        //RESET TO OLD VALUE
        return "";
      });

    };

Последняя часть головоломки, если выясните, что должно произойти внутри моей функции NO click (где RESET TO OLD VALUE).

  • 0
    Вот немного вдохновения
  • 0
    Уже видел это и поиграл с этим. Мысль об использовании директивы, которая проста для нажатия кнопок, но она не покрывает мое требование. Я не уверен, как именно это заставить работать так, как я объяснил выше. Фактическое объяснение / идея или короткая скрипка были бы более ценными. Спасибо за ваши усилия, хотя: ")
Показать ещё 1 комментарий
Теги:
x-editable

1 ответ

0
Лучший ответ

Мне удалось выполнить свою задачу, добавив xeditable и делая все, как следует, точно так, как я хотел с самого начала. Диалог запускается с атрибутом onbeforesave: onbeforesave="launchDialog(this.$editable.name, $data)"

  1. Добавить x-редактируемый
  2. Создайте свойство scope в моем контроллере, чтобы сохранить мое старое значение. Это делается в событии onShow.
  3. Добавьте e-ng-keypress (редактируемое состояние нажатия клавиши)
  4. Внесите соответствующие изменения в контроллер.

PS: Беспокойство о том, как заполнить данные таблицы через json на более позднем этапе, может усложнить ситуацию, и вам, скорее всего, придется создавать переменные для каждой записи, но она по-прежнему применима для моих целей.

HTML:

    <tr data-ng-repeat="item in [1,2]">
                            <td>{{ item }}</td>
                            <td><a href="#" editable-text="avg.jan" e-name="jan" e-ng-keypress="enterpress($event, this.$editable.name)" buttons="no" blur="submit" onbeforesave="launchDialog(this.$editable.name, $data)" onshow="onShow($data)" >{{ avg.jan || 'empty' }}</a></td>
 <td><a href="#" editable-text="avg.jan" buttons="no" blur="submit">{{ avg.jan || 'empty' }}</a></td>

Я также добавил сравнительный стандарт td, чтобы показать новые изменения.

контроллер

Контролеру потребуется несколько вещей, где-то хранить, а затем назначить старую переменную (если значение изменено, а затем отменено). Для этого также потребуется ввести ввод, обнаружение, сохранение и код диалога.

$scope.oldValue = "";

    $scope.onShow = function(data){
      $scope.oldValue = data;
      };


    $scope.saveData = function(key, data) {
      //TODO: SAVE DATA TO API
    }

    $scope.enterpress = function (e, data) {
      if (e.which === 13) {
        $scope.saveData();
      }
    }

    $scope.launchDialog = function(key, data) {
      var dlg = null;

      if(data != $scope.oldValue) {

        //ON ENTER KEY PRESS SKIP THE DIALOG + SAVE

        dlg = dialogs.confirm('Value Changed', 'Do you want to save this change?');
        dlg.result.then(function (btn) {
          //SAVE VALUE
          $scope.saveData(key, data);

        }, function (btn) {
          //RESET OLD VALUE
          $scope.avg[key] = $scope.oldValue;

        });
      }
    };

В общем, я рад, что, наконец, понял это, вытащил несколько волос, но в конце концов это было весело. Надеюсь, что это поможет кому-то с аналогичными требованиями: способ расширения функциональности xeditable.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню