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

Form with editable elements should have `editable-form` attribute

提问by Alex Man

I have a form within which i have used x-editableplugin for editing a text-field. But i am getting the following script error. Can anyone please tell me some solution for this

我有一个表单，我在其中使用了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

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>

script

脚本

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

回答by runTarm

There are a couple things to do:

有几件事要做：

1. add the editable-formattribute to the form as the error suggest.
2. remove the e-form="textBtnForm", it's not required for your requirement.
3. instead, set the textBtnFormas a name of the form.
4. add type="button"to the edit button, otherwise it doesn't work (don't know why ..).
5. I've also add save and cancel button when editing for the sake of completeness.

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

The result would look like this:

结果如下所示：

<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/

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

Hope this helps.

希望这可以帮助。

回答by David Bohunek

If there is just a single element you want to edit, you can remove the form, which will make it work. Or you must add ng-click="$form.$show()"to the spanelement as described here.

如果您只想编辑一个元素，您可以删除表单，这将使其工作。或者您必须按照此处所述添加ng-click="$form.$show()"到span元素中。

回答by Victor Orletchi

the previous approach is partial correct and can be applied only if use a single input in that form. Also if you try to add more elements, then will not work correct. So the right solution that i have is to use ng-form with editable-form directive as block for each form element (input) that you want apply the xedit plugin, and of course remove editable-form from main form.

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

the sample based by your code is below:

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

<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>