Angularjs xeditable - 保存但不编辑

问题描述：

我正在使用angular x-editable来编辑html表内联。问题是我需要给用户选项来保存表中的所有数据，而不必将其放入编辑模式。如果我这样做了，那么我的范围值就会被忽略掉。Angularjs xeditable - 保存但不编辑

但是，如果我第一次把窗体放在编辑模式，然后点击保存，一切工作正常。

这里是的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 = ''; 

});

有没有办法实现这一点，所以，用户应该如果不需要进行任何更改，则不必进入编辑模式

答

我能弄明白这一点。这里是万一别人解决方案需要它：

您需要添加NG点击=“ tableform $显示（）”，保存按钮以及

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

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

Angularjs xeditable - 保存但不编辑

相关推荐