Angular JS 表单管理答案

【问题标题】：Angular JS Form managementAngular JS 表单管理
【发布时间】：2014-06-12 17:33:31
【问题描述】：

我正在使用 Django，并且想在我的表单上使用 Angular。是否可以绑定到表单元素而无需显式写出每个输入元素并添加 ng-model？

我希望能够做到这一点：

<form name="myForm" ng-submit="submitForm()">
    <input type="text" name="username" />
    <input type="text" name="password" />
</form>

并以 myForm.username 和 myForm.password 的形式访问 $scope 中的用户名/密码，而不必这样做：

<form name="myForm" ng-submit="submitForm()">
    <input type="text" name="username" ng-model="myForm.username" />
    <input type="text" name="password" ng-model="myForm.password" />
</form>

这在使用 Django 的表单构建器时会很有用，它会根据表单所基于的模型自动输出表单，并且在进行更改时不必写出和修改每个表单。

【问题讨论】：

标签： django forms angularjs

【解决方案1】：

我昨天必须这样做......我会这样做：

forms.py

form_name = 'myForm'  #or some other logic to get form class name
username = forms.CharField(widget=forms.TextInput(attrs={'ng-model': '%s.username' % form_name}))

或使用https://github.com/jrief/django-angular

from django import forms
from djangular.forms.angular_model import NgModelFormMixin

class ContactForm(NgModelFormMixin, forms.Form):
    subject = forms.CharField()
    # more fields ...

这将输出：

<input id="id_subject" type="text" name="subject" ng-model="subject" />

【讨论】：