將Python列表傳遞給AngularJS模塊

我目前正在創建一個搜索框，該列表將提供從數據庫中提取的建議列表，但在將Python列表傳遞給AngularJS模塊時，我無法獲得正確的語法。將Python列表傳遞給AngularJS模塊

這是我Python列表：

TaskNameList = [{'id':'1','name':'Alabama'},{'id':'2','name': 'Alaska'}]

我想，我是不是能夠在這裏得到正確的語法，其中TaskNameList是views.py：

$scope.states = {{ TaskNameList }};

這是我的完整模板代碼：

index.html：

<html ng-app="ui.bootstrap.demo"> 
    <head> 
    <script> 
     angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) { 

    $scope.selected = undefined; 
    $scope.states = {{ TaskNameList }}; 
    // Any function returning a promise object can be used to load values asynchronously 
    $scope.getLocation = function(val) { 
    return $http.get('', { 
     params: { 
     sensor: false 
     } 
    }).then(function(response){ 
     return response.data.results.map(function(item){ 
     return item.formatted_address; 
     }); 
    }); 
    }; 

}); 
    </script> 
    </head> 
    <body> 

<div class='container-fluid' ng-controller="TypeaheadCtrl"> 

    <h4>Static arrays</h4> 
    <input type="text" ng-model="selected" typeahead="state as state.name for state in states | filter:{name:$viewValue} | limitTo:8" class="form-control"> 

    </div> 
    </body> 
</html>

來源

2015-09-01 acknolodgia

Django varible在JavaScript訪問爲「{{TaskNameList}}」。你可以顯示'console.log（「{{TaskNameList}}」）'？ – itzMEonTV

一個更好的選擇是將數組轉換爲JSON，像這樣：

import json 
TaskNameListJson = json.dumps(TaskNameList)

，並在您的模板（使用安全過濾器HTML轉義）：

{{ TaskNameListJson|safe }}

順便說一句，你應該使用逐字標記，以避免與角模板語法的衝突：https://docs.djangoproject.com/en/1.8/ref/templates/builtins/#verbatim

來源

2015-09-01 08:59:59

將Python列表傳遞給AngularJS模塊

回答

相關問題