- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在 Flask 和 AngularJS 上开发网站。我需要使用 AngularJS 发送一个带有 AJAX 的表单,但它需要输入字段的自定义属性。例如我在 Jinja2 模板中有一个表单:
<form method="post" action="/">
{{ form.hidden_tag() }}
{{ form.name(placeholder="Name") }}
</form>
那么我如何从 AngularJS 添加一个属性让我的“名称”字段说“ng-model”?
感谢您的帮助!
最佳答案
Python 标识符中不允许使用破折号,并且只有 Python 标识符可以用作调用中的 keyword_argument=value
对。
但是您有多种选择可以解决这个问题;您可以在 **kwargs
映射中传递 ng-
前缀选项,让您用于表单翻译的 Meta
类 _
到 -
用于 ng_
属性,或使用自定义小部件进行相同的转换。
使用 **kwargs
可以传入不是 Python 标识符的参数,只要它们是字符串即可。使用它来呈现您的表单字段:
{{ form.name(placeholder="Name", **{'ng-model': 'NameModel'}) }}
您可以将相同的信息放在字段定义的 render_kw
映射中:
class MyForm(Form):
name = StringField(u'Full Name', render_kw={'ng-model': 'NameModel'})
并且每次渲染该字段时都会使用它; render_kw
被添加到渲染时传入的任何参数中,因此:
{{ form.name(placeholder="Name") }}
将呈现 placeholder
和 ng-model
属性。
从 WTForm 2.0 开始,Meta
class you attach to your form实际上被要求使用 Meta.render_field()
hook 渲染字段:
import wtform.meta
class AngularJSMeta:
def render_field(self, field, render_kw):
ng_keys = [key for key in render_kw if key.startswith('ng_')]
for key in ng_keys:
render_kw['ng-' + key[3:]] = render_kw.pop(key)
# WTForm dynamically constructs a Meta class from all Meta's on the
# form MRO, so we can use super() here:
return super(AngularJSMeta, self).render_field(field, render_kw)
直接在您的表单上使用它:
class MyForm(Form):
Meta = AngularJSMeta
name = StringField(u'Full Name')
或继承 Form
类:
class BaseAngularJSForm(Form):
Meta = AngularJSMeta
并将其用作所有表单的基础:
class MyForm(BaseAngularJSForm):
name = StringField(u'Full Name')
现在您可以将此模板用于:
{{ form.name(placeholder="Name", ng_model='NameModel') }}
您可以将您选择的小部件子类化为:
class AngularJSMixin(object):
def __call__(self, field, **kwargs):
for key in list(kwargs):
if key.startswith('ng_'):
kwargs['ng-' + key[3:]] = kwargs.pop(key)
return super(AngularJSMixin, self).__call__(field, **kwargs)
class AngularJSTextInput(AngularJSMixin, TextInput):
pass
这会将任何以 ng_
开头的关键字参数转换为以 ng-
开头的关键字参数,确保可以添加正确的 HTML 属性。 AngularJSMixin
可以与任何小部件类一起使用。
将其用作您字段上的 widget
属性:
class MyForm(Form):
name = StringField(u'Full Name', widget=AngularJSTextInput())
在渲染模板时,您可以再次使用 ng_model
:
{{ form.name(placeholder="Name", ng_model='NameModel') }}
在所有情况下,属性将作为 placeholder="Name"ng-model="NameModel"
添加到呈现的 HTML 中:
<input id="name" name="name" ng-model="NameModel" placeholder="Name" type="text" value="">
关于javascript - Flask WTForms 的自定义属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20440056/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!