形式与内容编辑应具备可编辑` - form`属性 [英] Form with editable elements should have `editable-form` attribute

问题描述

我在其中我已经使用 X-编辑插件编辑一个文本字段的形式。但我得到下面的脚本错误。谁能告诉我一些这方面的解决方案。

可编辑的元素

 表应该有`编辑-form`属性。 ＆LT;跨度可编辑的文本=user.nameE型=textBtnForm级=NG-NG范围，结合可编辑的＆GT;
 

工作演示

HTML

 ＆LT; D​​IV NG-应用='对myApp'NG控制器=ArrayController＆GT;
    ＆LT;形式的行动=＃＆GT;
        ＆LT;跨度可编辑的文本=user.nameE型=textBtnForm＆GT;
    {{user.name || '空'}}
        ＆LT; / SPAN＆GT;
        ＆LT;按钮类=BTN BTN-默认的NG点击=$ textBtnForm秀（）。NG隐藏=$ textBtnForm可见。＆gt;编辑
        ＆LT; /按钮＆GT;
    ＆LT; /表及GT;
＆LT; / DIV＆GT;
 

脚本

  VAR应用= angular.module（'对myApp'，[xeditable]）;
app.controller（'ArrayController'，函数（$范围）{
    $ scope.test =MANU;
    $ scope.user = {
        名称：'真棒用户
    };
}）;
 

解决方案

有几件事情要做：

1. 在可编辑的形式属性添加到窗体的错误提示。


2. 删除电子形式=textBtnForm，它不需要您的要求。


3. 代替，将 textBtnForm 作为形式的名称。


4. 添加键入=按钮来的编辑按钮，否则它不能正常工作（不知道为什么..）。


5. 我也补充保存和取消按钮编辑为完整起见时。

结果是这样的：

 ＆LT;形成可编辑的格式名称=textBtnForm行动=＃＆GT;
    ＆LT;跨度可编辑的文本=user.name＆GT;
        {{user.name || '空'}}
    ＆LT; / SPAN＆GT;
    ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=$ textBtnForm秀（）。NG隐藏=$ textBtnForm可见。＆GT;
        编辑
    ＆LT; /按钮＆GT;
    ＆LT;$ textBtnForm可见跨越NG-秀= GT;
        ＆LT;按钮式=提交级=BTN BTN-主要NG-禁用=＆GTtextBtnForm $等待。
          保存
        ＆LT; /按钮＆GT;
        ＆LT;按钮式=按钮级=BTN BTN-默认的NG-禁用=$ textBtnForm等待。NG点击=＆GTtextBtnForm $取消（）。
          取消
        ＆LT; /按钮＆GT;
    ＆LT; / SPAN＆GT;
＆LT; /表及GT;
 

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

希望这有助于。

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

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>

script

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

解决方案

There are a couple things to do:

1. add the editable-form attribute to the form as the error suggest.
2. remove the e-form="textBtnForm", it's not required for your requirement.
3. instead, set the textBtnForm as 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.

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/

Hope this helps.

这篇关于形式与内容编辑应具备可编辑` - form`属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！