Использование угловых с колбой

Question

У меня есть этот файл Excel, который я помещаю в html как таблицу, используя Flask. Вот код:

filename = 'abc.xlsx'
data = pd.read_excel(filename,sheetname='Add-on')
data = data.fillna('')
return render_template('index.html',tables=[data.to_html()],
titles = ['Excel Data to Flask'])

Теперь я хочу использовать angular для добавления некоторых контроллеров в html. Но дело в том, что функция pandas to_html уже создает структуру таблицы.

Вот мой шаблон index.html

<div class="container" data-ng-app="myApp" data-ng-controller="myCtrl">
<div class="row">
 <div class="col-md-2">
    Search:
 </div>
 <div class="col-md-10">
    <input type="text" class="search" data-ng-model="table" />
  </div>
</div>
<br/>
<div class=page>
<!-- <h1>Python</h1> -->
{% for table in tables %}
<h2>{{titles[loop.index]}}</h2>
{{ table|safe }}
{% endfor %}
</div>
</div>
<div data-pagination="" data-num-pages="numPages()" data-current- 
page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" />
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
$scope.currentPage = 1,
$scope.numPerPage = 5,
$scope.maxSize = 5;
$scope.numPages = function () {
return Math.ceil($scope.customers.length / $scope.numPerPage);
};
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
 });
 });
 </script>

Но это не работает. Я должен видеть номера страниц, но не могу. Также, как вставить data-ng-repeat="customer in people | filter: table" в тег tr html для поиска в таблице html. Потому что панды to_html() автоматически создают шаблон для меня.

Answer 1

Вместо передачи полной таблицы из Python.Передайте массив в такой форме.В основном объект словаря в массиве

    People=[
    {name:'abc',phone:1234,age:18},
    {name:'abc1',phone:12346,age:18},
    {name:'abc1',phone:1234,age:18},
    {name:'abc1',phone:12345,age:18},
    ]
now in your tr tag
<tr ng-repeat="customer in people">
<td>{{customer.name}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.age}}</td>

Это стандартный способ сделать это из python.Вы можете использовать flask.jsonify () для возврата данных.