Angularjs xeditable - 保存而不编辑答案

【问题标题】：Angularjs xeditable - Save without editAngularjs xeditable - 保存而不编辑
【发布时间】：2014-11-24 23:14:29
【问题描述】：

我正在使用 angular x-editable 来编辑 html 表格内联。问题是我需要让用户选择保存表中的任何数据而不将其置于编辑模式。如果我这样做，那么我的范围值将在 onaftersave 方法中消失。

但如果我先将表单置于编辑模式，然后点击保存，一切正常。

这里是显示问题的 JSFiddle：http://jsfiddle.net/0yvhd84o/

HTML：

<div ng-app="app" ng-controller="Ctrl" style="margin: 50px">
 <form editable-form name="tableform" onaftersave="saveTable()">

     <table class='table table-bordered'>
         <tr style="font-weight: bold">
             <td>Name</td>
         </tr>
         <tr>   
             <td>

                  <span editable-text="user.name" e-form="tableform" onaftersave="saveTable()">
            {{ user.name || 'empty' }}
          </span>
             </td>
         </tr>
     </table>
         <div class="btn-edit">
      <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
        edit
      </button>
                   <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
    </div>
    <div class="btn-form" ng-show="tableform.$visible">


      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
    </div> 
</form>
    <br><br>
    <div class="row">
        Result is: {{result}}
    </div>
</div>

AngularJS

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter) {
  $scope.user = {
    name: 'awesome user',
    status: 2
  };


    $scope.saveTable = function(){

        $scope.result = $scope.user.name ;
    }

    $scope.result = '';

});

有没有办法实现这一点，这样用户在不需要进行任何更改时就不必进入编辑模式

【问题讨论】：

标签： angularjs x-editable

【解决方案1】：

我能够弄清楚这一点。以下是其他人需要时的解决方案：

您还需要添加 ng-click="tableform.$show()" 来保存按钮

<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary" ng-click="tableform.$show()">save</button>

工作示例：http://jsfiddle.net/9eg11s0o/

【讨论】：