Question

我有一个表单，我在其中使用x-editable插件来编辑文本字段。但我得到以下脚本错误。任何人都可以告诉我一些解决方案

Form with editable elements should have `editable-form` attribute. <span editable-text="user.name" e-form="textBtnForm" class="ng-scope ng-binding editable">

Working Demo

HTML

<div ng-app='myApp' ng-controller="ArrayController">
    <form action="#" > 
        <span editable-text="user.name" e-form="textBtnForm">
    {{ user.name || 'empty' }}
        </span>
        <button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">edit
        </button>
    </form>
</div>

脚本

var app = angular.module('myApp', ["xeditable"]);
app.controller('ArrayController', function ($scope) {
    $scope.test = "manu";
    $scope.user = {
        name: 'awesome user'
    };
});

Answer 1

有几件事要做：

将editable-form属性添加到表单中，如错误所示。
删除e-form="textBtnForm"，这不是您的要求所必需的。
而是将textBtnForm设置为表单的名称。
将type="button"添加到编辑按钮，否则它不起作用（不知道为什么......）。
为了完整起见，我还在编辑时添加了保存和取消按钮。

结果如下：

<form editable-form name="textBtnForm" action="#"> 
    <span editable-text="user.name">
        {{ user.name || 'empty' }}
    </span>
    <button type="button" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
        edit
    </button>
    <span ng-show="textBtnForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="textBtnForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">
          Cancel
        </button>
    </span>
</form>

JSFiddle： http://jsfiddle.net/5TZX5/1/

希望这有帮助。

Answer 2

如果您只想编辑一个元素，则可以删除该表单，这样可以使其正常工作。或者，您必须按照here所述的ng-click="$form.$show()"元素添加span。

Answer 3

以前的方法是部分正确的，只有在该表单中使用单个输入时才能应用。此外，如果您尝试添加更多元素，那么将无法正常工作。因此，我所拥有的正确解决方案是使用带有editable-form指令的ng-form作为要应用xedit插件的每个表单元素（输入）的块，当然还要从主表单中删除editable-form。

基于您的代码的示例如下：

<div ng-app='myApp' ng-controller="ArrayController">
  <form action="#" >
    <div ng-form editable-form name="textBtnForm">
      <span editable-text="user.name" ng-click="textBtnForm.$show()">{{user.name||'empty'}}</span>
      <span ng-show="textBtnForm.$visible">
        <button type="button" class="btn btn-primary" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$submit()">              Save</button>
        <button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">cancel</button>
    </span>
    </div>

    <hr>second form element<hr>

    <div ng-form editable-form name="textBtnForm2"> 
      <span editable-text="user.phone" ng-click="textBtnForm2.$show()">{{ user.phone || 'empty' }}</span>
      <span ng-show="textBtnForm2.$visible">
        <button type="button" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$submit()">Save</button>
        <button type="button" class="btn btn-default" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$cancel()">  Cancel</button>
      </span>
    </div>
  </form>
</div>

具有可编辑元素的表单应具有“editable-form”属性

3 个答案: