如何将表的数据从Python烧瓶render_template传递到AngularJS控制器

Question

我遵循了下面的教程，创建了一个成功的html页面来显示一个表。然而，我想将html文件与我的Python Flask应用程序集成，以使用表数据呈现html。我尝试了下面的代码，但它不起作用。

http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview

<script>
angular.module('myApp', ['trNgGrid'])
.controller("MainCtrl", ["$scope", function ($scope) {
$scope.myItems = [
{% for data in datas %}
{
{% for key, value in data.items() %}
{% if value is string %}
'{{ key }}': '{{ value }}',
{% else %}
'{{ key }}': {{ value }},
{% endif %}
{% endfor %}
},
{% endfor %}
];
}]);
</script>

路线.py

@app.route('/page')
def jumping():
df = pd.read_csv(REPORT_CSV)
arr = [row for row in df.to_dict(orient='records')]
return render_template('page.html', datas=arr)

我试了很多，但还是坚持了下来。迫切需要一些解决方案。提前谢谢。

Answer 1

从flask Jinja对象中渲染数据非常困难，然后它将在AngularJS控制器中初始化。我有比这更好更简单的方法。

from flask import jsonify, render_template
@app.route('/page')
def jumping():
return  render_template('index.html')
@app.route('/page/list-records')
def list_records():
df = pd.read_csv(REPORT_CSV)
arr = [row for row in df.to_dict(orient='records')]
return  jsonify({'datas'=arr})

您需要更改AngularJS控制器中的某些内容，下面的代码将为您提供有关实现的更多信息。

angular
.module('myApp', ['trNgGrid'])
.controller("MainCtrl", ["$scope", "$http" function ($scope, $http) {
$scope.myItems = [];
$http.get('/page/list-records').then(function (resp) {
$scope.myItems = resp.data.datas;
}
}]);