Django HTML для l oop с фильтром

Question

В моем проекте django у меня есть HTML, который отображает заголовок вопросов, а внутри заголовков вопросов у меня есть элементы вопросов. В моей модели заголовки и элементы вопросов - это две разные сущности. Мне нужно показать для каждого заголовка только элементы, относящиеся к этому заголовку. Поскольку он показывает все элементы для всех вопросов без каких-либо фильтров. Очень благодарен за любую помощь!

Модель:

class Question(models.Model):
    question              = models.CharField(max_length=240)
    mission_section       = models.ForeignKey('Mission_Section', on_delete=models.CASCADE)
    type_question         = models.ForeignKey('Type_Question', on_delete=models.CASCADE)
    categories_question   = models.ForeignKey('Categories_Question', on_delete=models.CASCADE, default=1)
    order                 = models.IntegerField(default=1)
    def __str__(self):
        return self.question

class Question_Option(models.Model):
    question = models.ForeignKey('Question', on_delete=models.CASCADE,default=1)
    option = models.CharField(max_length=240)
    correct = models.BooleanField()
    order = models.IntegerField(default=1)

Вид:

class Questions(LoginRequiredMixin, FormView):
    template_name = "questions.tmpl"
    def get(self, request, pk):
        context = {
        'pk': pk, 
        'section': Mission_Section.objects.get(pk = pk ), 
        'questions_items': Question_Option.objects.filter(question__mission_section__pk=pk).order_by('order','pk'), 
        'questions': Question.objects.filter(mission_section__pk = pk ),
        'question_types' : Type_Question.objects.all(),
        'questions_categories': Categories_Question.objects.all()}
        return render(self.request, self.template_name, context)

HTML

<input type="hidden" class="form-control" id="section" name="section" value="{{section.id}}" required>
<h1>{{ section.name }}</h1>
<div id="contentDiv">
    <ol>
  {% for question in questions %}
  <div name="question" class="form-group" id="question-{{question.id}}" >
          <form class='my-ajax-form' id="form-question-{{question.id}}" method='GET' action='.' data-url='{{ request.build_absolute_uri|safe }}'>
    <li><div class="input-group">

        {% csrf_token %}
        {{ form.as_p }}
        <input type="text" value= "{{question.id}}" id="question" name="question-hidden" class="form-control">
        <input type="text" value= "{{question.question}}" id="question_name_{{question.id}}" class="form-control" aria-label="Amount" onchange="UpdateQuestion({{question.id}})">

    </div>
    </form>

  <br>

<!-- Options -->
  <div id = "question_content_{{question.id}}" name="question-options" class="collapse">
    <ol class="example list-group">
      {% for qi in questions_items %}
      <li class="list-group-item d-flex justify-content-between align-items-center" id={{qi.id}} name="opt-{{question.id}}-{{qi.id}}" onclick="setCorrect({{qi.id}},{{question.id}})" contenteditable="true">{{ qi.option }}
         <span class="badge badge-warning badge-pill">-</span>
      </li>
          {% endfor %} </ol>
          <div>
            <div class="d-flex justify-content-center">Add Option</div>
            <div class="d-flex justify-content-center"> <br><i class="fa fa-plus-circle fa-1x" aria-hidden="true"></i></div>
          </div>
  </div>
  </div></li>
  {% endfor %} </ol>

Answer 1

используя этот ответ, я понял это Двойной l oop в Django шаблоне

Мне нужно:

  <div id = "question_content_{{question.id}}" name="question-options" class="collapse">
{% csrf_token %}
{{ form.as_p }}
<form class='ajax-form-option' id="form-option-{{question.id}}" method='GET' action='.' data-url='{{ request.build_absolute_uri|safe }}'>
<ol class="example list-group">
  {% for qi in question.question_option_set.all %}
  <li class="list-group-item d-flex justify-content-between align-items-center" id=option-{{qi.id}} name="opt-{{question.id}}-{{qi.id}}">
    <div contenteditable="true">{{ qi.option }}</div>
    <div>
      <button type="button" name='option-check' class="btn btn-light" value={{qi.id}} id="check-option-{{question.id}}-{{qi.id}}">
        <i class="fas fa-check"></i>
      </button>
      <button type="button" class="btn btn-warning" id="delete-option-{{question.id}}-{{qi.id}}" onclick="deleteOption({{qi.id}})">
        <i class="fa fa-trash" aria-hidden="true"></i>
      </button>
    </div>
  </li>
      {% endfor %} </ol>
      <div onclick="CreateOption({{question.id}})">  
        <div class="d-flex justify-content-center">Add Option</div>
        <div class="d-flex justify-content-center"> <br><i class="fa fa-plus-circle fa-1x" aria-hidden="true"></i></div>
      </div>
</form>