Question

问题

汇总：当使用Angular http服务从服务器检索数据时，如何动态填充预渲染的Django ChoiceField / ModelChoiceField。

我无法使用函数返回的数据填充Django ModelChoiceField。我确实使用了角度模板，但是问题是在保存到数据库之前我无法用form.is_valid（）验证这些字段，因为我已经将<select>字段硬编码到我的html中。

我有一个ModelChoiceField的原因是因为我尝试过滤notification_type的值并将它们附加到notification_type字段。即使表单字段已成功填充值，我也无法返回数据并在我的模板中显示，因为我有一个Angular控制器期望数据。

守则

HTML 的

<div>
    <label>Select department</label>
    <div>
        {{ form.department }}
    </div>
</div>
<div>
    <label>Select notification type</label>
    <div ng-controller="selectNotificationTypeCtlr">
        <select ng-change="getNotfications()" ng-model="selectedNotificationType">
                <option ng-repeat="i in notificationTypes" value="{[{ i.pk }]}">{[{ i.fields.notification_type }]}</option> <!-- fields.notification_type -->
        </select>
    </div>
</div>

app.js

selectNotification.controller('selectDepartmentCtlr', function($scope, $http) {
$scope.getNotificationType = function() {
    var id = $scope.selectedDepartment;
    var notificationTypes = [];
    $http({
        method : "GET",
        url : id
     }).then(function success(response) {
        $scope.notificationTypes = response.data;
     }, function error(response) {
        var errorMessage = "Oops it looks like something went wrong. Please try again.";
     });
   };
});

正如您所看到的，我理解了这个过程，它只是将它与Django表单集成在一起。

views.py

@login_required(login_url="/login/")
def get_notification_types(request, id):
if request.method == "GET":
    department = Department.objects.get(id=id)
    notification_types = NotificationType.objects.filter(department=department.id)
    return HttpResponse(serializers.serialize('json', notification_types))

forms.py

from django import forms
from notifications.models import Department
from notifications.models import NotificationType


class SelectNotificationForm(forms.Form):
    department = forms.ModelChoiceField(queryset=Department.objects.all(), widget=forms.Select(attrs={'class':'input-element', 'ng-change':'getNotificationType()', 'ng-model':'selectedDepartment'})) #widget=forms.Select(attrs={'class': 'add_class_here'}) # ChoiceField(widget=forms.Select()
    notification_type = forms.ModelChoiceField(queryset=NotificationType.objects.none(), widget=forms.Select(attrs={'class':'input-element'}))
    notification_name = forms.ChoiceField(widget=forms.Select(attrs={'class':'input-element'}))
    notification_contacts = forms.MultipleChoiceField(widget=forms.SelectMultiple(attrs={'class':'input-element'}))
    subject = forms.CharField(widget=forms.Select(attrs={'class':'input-element'}))
    body = forms.CharField(widget=forms.Textarea)

如何显示

这是使用我当前代码运行的网站。

Screenshot of site

我需要的帮助

我想在保存时使用Django通过is_valid（）函数验证我的表单，但我还需要使用返回给我的Angular Controller的JSON数据对象填充第二个ChoiceField。真正让我感到高兴的是它与Angular一起工作正常，我只需要使用{{form.notification_type}}来阻止我循环并从Angular控制器显示返回的JSON对象。

html模板，允许我验证ChoiceField / ModelChoiceFields

html （理想情况下，我想根据下面的代码呈现表单，以便我可以验证表单。）

<div>
    <label>Select department</label>
    <div>
        {{ form.department }}
    </div>
</div>
<div>
    <label>Select notification type</label>
    <div ng-controller="selectNotificationTypeCtlr">
        {{ form.notification_type }}
    </div>
</div>

我知道一种解决方法，这意味着我在所有表单ChoiceFields上设置required = False。但是，我觉得这可能会引发更多问题。

非常感谢任何建议或帮助。

Answer 1

解决方案（“ng-options”指令）：

            notification_type = forms.ModelChoiceField(queryset=NotificationType.objects.none(), widget=forms.Select(attrs={'class':'input-element', 'ng-focus':'populateNotificationTypes()', 'ng-change':'x()', 'ng-model':'selectedNotificationType', 'ng-options':'x.pk as x.fields.notification_type for x in notificationTypes', 'ng-model':'selectedNotificationType'}))

最初在值字段中显示object：id的原因与我在ng-option属性中引用返回的JSON对象的方式有关。

ng-options值显示为value =“object：id”not value =“id”

1 个答案: