Categories
Development

Flask Jinja2 template syntax conflicts with AngularJS (jinja2.exceptions.UndefinedError:)

How to access a $scope.list in html from angularjs?

jinja2.exceptions.UndefinedError: ‘car’ is undefined

main.js

angular.module('WordcountApp', [])    
.controller('WordcountController', ['$scope', function($scope) {
    $scope.some = 'jjj'

    console.log( "in WordcountController " , $scope.some)

    $scope.cars = [
        {make: 'Mazda', model: 'Miata', year: 2001},
        {make: 'Toyota', model: 'Prius', year: 2013},
        {make: 'Tesla', model: 'S', year: 2015},
        {make: 'BMW', model: '325i', year: 2012}
    ]
}]);

index.html

<!DOCTYPE html>
<html ng-app = "WordcountApp" >

    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script>
        <script src = "static/main.js" > </script>
    </head>

    <body ng-controller = "WordcountController">
        <ul ng-repeat = "car in cars" >
            <p>  </p>
        </ul>
    </body>
</html>

app.py

from flask import Flask 
from flask import render_template   
from flask import request           

app = Flask( __name__ )
displayText = 'Default text from Python'

@app.route('/', methods=['GET', 'POST'])
def index():
    return render_template('index.html')

@app.route("/writeOutput", methods=['POST'])
def writeOutput():
    global displayText

    print("request.get_json():- ", request.get_json())

    displayText = request.get_json()['myOutput']['myText']

    print ("from POST " , displayText)
    return displayText


@app.route("/displayPreviousText", methods=['GET'])
def displayPreviousText():
    global displayText
    return displayText 

if __name__ == "__main__":
    app.run()

I run this application as python app.py

Error: jinja2.exceptions.UndefinedError: 'car' is undefined

What is the way to access the list in html from angular?

Leave a Reply

Your email address will not be published. Required fields are marked *