Question

我正在PythonAnywhere上通过Python + Django进行工作。我正在通过使用编写的ListView生成.html文件。我想要一个包含数据的表，该数据将根据下拉选择进行更改。

我正在尝试AngularJS选项组创建依赖于下拉框选择的动态Web脚本。但是，我遇到了错误 TemplateSyntaxError：无法解析其余部分：'（）'。此外，如果我暂时删除了html文件中的该错误错误以查看该页面，则括号{{}}中的所有内容均不会显示在屏幕上。

为什么这些引用不起作用？

Django网络应用程序是否了解如何引用.js文件？我正在按原样使用this sample tutorial。

.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')),
]

TemplateSyntaxError：无法解析“ size.toLowerCase（）”中的其余部分：“（）”

0 个答案: