Question

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

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

除了确认被视为无数例子之类的按钮之外，它们应该仅在保存（onblur）时显示在对话框中。

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

这时会弹出确认信息，通知用户该值已更改并询问是否要保存。

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

基本步骤如下：

用户点击表格单元格值

Cell变得可编辑。

用户更改单元格值。

用户点击单元格。

弹出小确认对话框（任何用户友好或增强的方式）

用户确认或取消已完成的编辑。

冲洗/重复。

感谢任何帮助。

请参阅当前fiddle

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

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

我现在使用 onshow 属性，以便将我正在编辑的单元格的当前值保存到范围内。

我使用 onbeforesave 属性来启动对话框并执行是/否检查。

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 点击功能（重置为旧值）中需要发生什么，最后一块拼图。

Answer 1

我已经设法完成了我的任务，添加了xeditable并按照以下方式执行所有操作，完全按照我的想法从一开始就完成。使用属性 onbeforesave ：onbeforesave="launchDialog(this.$editable.name, $data)"

启动对话框

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

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

<强>控制器

控制器需要一些东西，在某处存储然后分配旧变量（如果值被更改然后取消）。它还需要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;

        });
      }
    };

总体而言，我很高兴我终于弄清楚了这一点，拔出了几根头发，但最后很有趣。希望它能够帮助有类似要求的人：一种扩展可编辑功能的方法。

Angular XEditable对话

1 个答案: