Question

我使用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 = '';

});

有没有办法实现这一点，因此如果用户不必进行任何更改，用户就不必进入编辑模式

Answer 1

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

您需要添加ng-click =＆＃34; tableform。$ show（）＆＃34;保存按钮

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

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

Angularjs xeditable - 无需编辑即可保存

1 个答案: