Angular XEditable 对话框

Question

我有一个 AngularJS 应用程序，我在其中使用 Xeditable 来动态修改 table 值。我正在使用一种标准方法来编辑值而不显示任何按钮并使用 blur 属性来提交我的所有更改 rapidly 和内联。

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

不应像在无数示例中那样将确认视为按钮，它们应该仅在保存时显示在对话框中 (onblur)。

由于用户交互问题，我想在更改字段然后单击离开时（或当字段退出其编辑状态时）显示确认对话框。基本上是“onbeforesave=”属性中的内容。

此时应弹出确认消息，通知用户值已更改并询问他们是否要保存。

我知道如何在 onbeforesave 事件上调用一个函数，尽管因为它位于控制器中我不知道如何调用一个确认对话框。

基本步骤如下：

User Clicks on a table cell value

Cell becomes editable.

User changes the cell value.

User clicks away from the cell.

small confirmation dialog pops up (any user friendly or boostrappy way)

User confirms or cancels the edit which was made.

Rinse / Repeat.

感谢任何帮助。

查看当前 fiddle

更新： 我最近的尝试使我实现了 angular-dailog-service 解决了我上面最初的问题，但我仍然无法解决我原来问题的最后一部分。

单击单元格、更改值并单击离开后，我会收到一个对话框 window（确认），当我点击 YES 时将调用我的 api 并保存值 - 这有效。然而，在单击 NO 后，我的值在 table 中保持不变。现在需要将此值恢复为以前的值。有帮助吗？

I now use a onshow attribute in order to save my current value of the cell being edited to the scope.

I use the onbeforesave attribute in order to launch my dialog and perform the Yes/No check.

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 点击功能（其中 RESET TO OLD VALUE是).

Answer 1

我已经成功地通过添加 xeditable 并按照以下方式完成了我的任务，完全按照我从一开始就想要的。该对话框使用 onbeforesave 属性启动：onbeforesave="launchDialog(this.$editable.name, $data)"

添加 x-editable
在我的控制器中创建一个范围属性来存储我的旧值。这是在 onShow 事件上完成的。
添加一个 e-ng-keypress（editable 状态按键事件）
在控制器中进行相关更改。

PS：担心如何在稍后阶段通过 json 填充 table 数据可能会使事情复杂化，您可能需要创建变量对于每个条目，但它仍然可以满足我的目的。

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，以显示新的变化。

控制器

控制器需要一些东西，在某处存储然后分配旧变量（如果值被更改然后取消）。它还需要 Enter 按键检测、保存和对话代码。

$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;

        });
      }
    };

总的来说，我很高兴我终于想通了，拔了几根头发，但最后很有趣。希望它能帮助有类似需求的人：A way in which to extend xeditable functionality.

Angular XEditable 对话框

Angular XEditable Dialog

angularjs

x-editable