Django not detecting AngularJS

Question

I have a Django project (that I created using PyCharm IDE). I have two HTML files and below is the code I have in those files.

-- header.html

<!DOCTYPE html>
<html lang="en" >
<head>
<title>This is my title</title>
<meta charset="UTF-8">
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="{% static 'js/script.js' %}"></script>

-- home.html

<html ng-app="myApp">
{% extends "query/header.html" %}
{% block content %}
 <p>Hey what's up</p>
    <select name="dropDown" ng-model="data.dropDown" >

        {% for num in list %}
            <option value="num">
            {{ num }}
            </option>
        {% endfor %}
    </select>
<p>You chose: {{ data.dropDown }}</p>
{% endblock %}
</html>

In my home.html, I have a dropdown that I created using <select>tag and is populated using a Python list. I am using ng-model in my select tag in order to get what user chooses in the dropdown and display it below but for some reason, it's not displaying anything when I select an option in the dropdown.

Also, in my PyCharm IDE, inside home.html, ng-app and ng-model are highlighted and I get a warning saying that Attribute ng-app/ng-model is not allowed here

Can you please tell me what I am doing wrong here?

Luis Masuelli · Accepted Answer · 2016-06-20 17:49:37Z

Let's see...

In header.html you seem to have no {% block content %} defined. There is nothing your template can inherit if no defined.
in home.html you have an additional html wrapping. You don't need it. In fact AFAIK the extends tag should be the first content in the file, aside from imports.
If you intend to add angular bindings like {{ this }}, ensure you wrap the bindable content in {% verbatim %} tags since the same syntax is used for django templates rendering.

Said this, I'd fix your templates like this:

Header:

{% load staticfiles %}
{# PLEASE add template tags imports at the beginning of the file #}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <!-- PLEASE ACCURATELY INDENT YOUR CODE!!!! -->
    <!-- I hope you have myApp defined in js/script.js file -->
    <head>
        <title>This is my title</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"/>
        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
        <script src="{% static 'js/script.js' %}"></script>
    <!-- PLEASE FOR GOD\'S SAKE MAKE A COMPLIANT HTML FILE!!!!!! I DONT KNOW WHAT IS THE REMAINING FILE BODY BUT I WILL ADD IT RIGHT NOW IN A MINIMALIST WAY -->
    </head>
    <body>
        {% block content %}{% endblcok %}
    </body>
</html>

The home file will be:

{% extends "query/header.html" %}
{% block content %}
    <p>Hey what's up</p>
    <select name="dropDown" ng-model="data.dropDown">
    {% for num in list %}
        <option value="num">{{ num }}</option>
    {% endfor %}
</select>
{% verbatim %}
<p>You chose: {{ data.dropDown }}</p>
{% endverbatim %}

Thank you very much for the explanation and the code, it works perfectly now.

Collectives™ on Stack Overflow

Django not detecting AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related