Angular XEditable 对话框

Question

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

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

与其将确认视为无数示例中的按钮，不如将它们仅在保存时显示在对话框中（onblur）。

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

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

我知道如何在 onbeforesave 事件上调用函数，但由于它位于控制器内，我不知道如何调用确认对话框。

基本步骤如下：

1. 用户点击表格单元格值
2. 单元格变为可编辑。
3. 用户更改单元格值。
4. 用户点击离开单元格。
5. 弹出小确认对话框（任何用户友好或助推方式）
6. 用户确认或取消所做的编辑。
7. 冲洗/重复。

感谢任何帮助。

查看当前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 点击函数（RESET TO OLD VALUE 所在的位置）需要发生什么，那么最后一块拼图。

Answer 1

我已经成功地完成了我的任务，添加了 xeditable 并按照我从一开始就希望完成的所有操作。 该对话框使用 onbeforesave 属性启动：onbeforesave="launchDialog(this.$editable.name, $data)"

1. 添加 x-editable
2. 在我的控制器中创建一个范围属性来存储我的旧值。这是在 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来展示新的变化。

控制器

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

        });
      }
    };

总的来说，我很高兴我终于想通了，拔了几根头发，但最后还是很有趣。希望它能帮助有类似要求的人：一种扩展可编辑功能的方法。