I am working through Python+Django on PythonAnywhere. I am generating a .html file by using a ListView I wrote. I want a table that contains data which will change based on drop down selections.
I am attempting to AngularJS Options Groups to create dynamic web scripting that is dependent on drop down box selections. However, I am running into the error TemplateSyntaxError: Could not parse the remainder: '()'. Additionally, if I temporarily remove this trouble error in the html file to view the page, anything within brackets {{ }} does not show on screen.
Why are these references not working?
Does a Django web-app understand how to reference the .js file? I am using this sample tutorial as is.
.html
{% load static %}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Option Groups</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><link rel='stylesheet' href='https://gitcdn.xyz/cdn/angular/bower-material/v1.1.20/angular-material.css'>
<link rel='stylesheet' href='https://material.angularjs.org/1.1.20/docs.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div ng-controller="SelectOptGroupController" class="md-padding selectdemoOptionGroups" ng-cloak="" ng-app="MyApp">
<div>
<h1 class="md-title">Pick your pizza below</h1>
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Size</label>
<md-select ng-model="size">
<md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label>Topping</label>
<md-select ng-model="selectedToppings" multiple="">
<md-optgroup label="Meats">
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
</md-optgroup>
<md-optgroup label="Veggies">
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
<p ng-if="selectedToppings">You ordered a {{size.toLowerCase()}} pizza with
{{printSelectedToppings()}}.</p>
</div>
</div>
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<!-- partial -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular-messages.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://gitcdn.xyz/cdn/angular/bower-material/v1.1.20/angular-material.js'></script>
<script src="{% static 'js/angularselect.js' %}"></script>
</body>
</html>
angularselect.js
angular
.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SelectOptGroupController', function($scope) {
$scope.sizes = [
"small (12-inch)",
"medium (14-inch)",
"large (16-inch)",
"insane (42-inch)"
];
$scope.toppings = [
{ category: 'meat', name: 'Pepperoni' },
{ category: 'meat', name: 'Sausage' },
{ category: 'meat', name: 'Ground Beef' },
{ category: 'meat', name: 'Bacon' },
{ category: 'veg', name: 'Mushrooms' },
{ category: 'veg', name: 'Onion' },
{ category: 'veg', name: 'Green Pepper' },
{ category: 'veg', name: 'Green Olives' }
];
$scope.selectedToppings = [];
$scope.printSelectedToppings = function printSelectedToppings() {
var numberOfToppings = this.selectedToppings.length;
// If there is more than one topping, we add an 'and'
// to be gramatically correct. If there are 3+ toppings
// we also add an oxford comma.
if (numberOfToppings > 1) {
var needsOxfordComma = numberOfToppings > 2;
var lastToppingConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastTopping = lastToppingConjunction +
this.selectedToppings[this.selectedToppings.length - 1];
return this.selectedToppings.slice(0, -1).join(', ') + lastTopping;
}
return this.selectedToppings.join('');
};
});
/**
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
**/
views.py
class DataList(ListView):
model = Data
context_object_name = 'all_datas'
def get_context_data(self, **kwargs):
context = super(DataList, self).get_context_data(**kwargs)
context['page_list'] = Page.objects.all()
return context
urls.py
urlpatterns = [
path('data/', include(([
path('', DataList.as_view(), name='data'),
], 'users'), namespace='users')),
]
