Angularjs 角度+；Flask：与Flask集成时无法迭代变量
我使用教程中的一些代码创建了一个小AngularJS项目，并对其进行了一些小的更改。但当我将其与Flask集成时，我得到了undefinedError:todo1是未定义的 服务器 客户 register.htmlAngularjs 角度+；Flask：与Flask集成时无法迭代变量,angularjs,flask,Angularjs,Flask,我使用教程中的一些代码创建了一个小AngularJS项目，并对其进行了一些小的更改。但当我将其与Flask集成时，我得到了undefinedError:todo1是未定义的 服务器 客户 register.html <head> <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter
<head>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="/static/lib/angular/angular.js"></script>
<script src="/static/lib/angular/angular-resource.js"></script>
<script src="/static/js/script.js"></script>
<script src="/static/lib/jquery/jquery.min.js"></script>
<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-controller="TodoController">
<h1>Todos</h1>
<div id='content'>
<div>
<input type='text' ng-model='searchText' placeholder='enter serial'/>
<ul>
<li ng-repeat='todo1 in filteredTodos | filter:searchText'>{{todo1.text}}</li>
</ul>
</div>
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
</div>
</body>
待办事项
- {{todo1.text}
var todos=angular.module（'todos'，['ui.bootstrap']）；
控制器（'TodoController'，函数（$scope）{
$scope.filteredTodos=[]
，$scope.currentPage=1
，$scope.numPerPage=10
，$scope.maxSize=5；
$scope.makeTodos=function（）{
$scope.todos=[]；
对于（i=1；i这与{{todo1}}
是角度和Jinja2语法有关。当Jinja2模板引擎看到{todo1}}
时，变量尚未定义，因为它将由AngularJS在浏览器中以JavaScript创建
有关解决方案，请参见示例：
您必须对web应用程序的工作方式有一个基本的了解。python/flask/jinja2部分在服务器上运行。jinja2尝试生成html并看到`{something}`。它将尝试用一个名为“something”的python变量的值替换它。如果它起作用，您的代码将（希望）向浏览器返回一个包含html的页面
在浏览器（客户端）中有AngularJS。它还查找类似于{{{something}}
。但是这些通常已经被jinja2取代。这就是为什么你需要链接中的解决方法。非常感谢rje..非常棒的学习..但是你能详细说明一下吗..就像有时我看不到冲突发生，有时它出现..这对每个人都很有帮助。添加了一点解释反倾销。
<head>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="/static/lib/angular/angular.js"></script>
<script src="/static/lib/angular/angular-resource.js"></script>
<script src="/static/js/script.js"></script>
<script src="/static/lib/jquery/jquery.min.js"></script>
<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-controller="TodoController">
<h1>Todos</h1>
<div id='content'>
<div>
<input type='text' ng-model='searchText' placeholder='enter serial'/>
<ul>
<li ng-repeat='todo1 in filteredTodos | filter:searchText'>{{todo1.text}}</li>
</ul>
</div>
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
</div>
</body>
var todos = angular.module('todos', ['ui.bootstrap']);
todos.controller('TodoController', function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo'+i, done:false});
}
};
$scope.makeTodos();
$scope.numPages = function () {
return Math.ceil($scope.todos.length / $scope.numPerPage);
};
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});