ng-options 值显示为 value="object:id" 而不是 value="id"

Posted 2023-02-24

【中文标题】ng-options 值显示为 value="object:id" 而不是 value="id"

【英文标题】：ng-options values shown as value="object:id" not value="id"

【发布时间】：2017-06-29 12:27:16

【问题描述】：

问题

总结：如何在使用 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 控制器的 JSON 数据对象填充第二个 ChoiceField。真正让我感到沮丧的是它与 Angular 配合得很好，只是我需要使用 form.notification_type 这会阻止我循环并显示从我的 Angular 控制器返回的 JSON 对象。

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

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。但是，我觉得这可能会导致进一步的问题。

任何建议或帮助将不胜感激。

【参考方案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')) 

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