AngularJS ng-repeat未打印变量

Question

AngularJS ng-repeat未打印变量

3

我正在本地的localhost:5000上使用flask运行它。如果我只是用浏览器打开html文件，它是有效的，但是在flask中不起作用。我有一个名为"arr"的数组，在我的控制器中有4个数字。我想打印出每个数字，但ng-repeat不能这样做。真正有趣和关键的是，ng-repeat会重复n次，其中n为数组中项目的数量，所以这是好的，但它无法在ng-repeat ="number in arr"中打印变量{{number}} 。这是我的代码：

<html ng-app='numberApp'>
<head>
  <meta charset="utf-8">
  <title>Cool</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script>
  var numberApp = angular.module('numberApp', []);
  numberApp.controller('numberCtrl', function($scope, $http){
      $scope.arr = [2, 4, 5, 6];
    });
  </script>
</head>
<body ng-controller="numberCtrl">
  <table>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
    <tr ng-repeat="number in arr">
      <td> {{ 'start' }} </td>
      <td> {{ number }} </td>
      <td> {{ 'end' }} </td>
    </tr>
  </table>
</body>
</html>

这是浏览器中显示的内容：

First   Second  Third
start           end
start           end
start           end
start           end

它不会打印出{{ number }}。感谢任何能告诉我原因的人！

- Adam

你的代码在这个 plunker 上运行良好。 - Kirill Slatin

我一直在使用 Flask 在本地主机上运行它，端口号为 5000。我忘记检查是否可以通过浏览器打开 HTML 文件来运行它。因此，这告诉我这是一个 Flask/Jinja 的问题。 - Adam

<td> {{ '{{number}}' }} </td> 对于阅读此内容的任何人都进行了修复。感谢robert.corlett在这里的答案：https://dev59.com/2GYr5IYBdhLWcg3wcJx0 - Adam

2个回答

2

Jinja很可能将angular的模板语法解释为自己的，并用空白替换{{ number }}。如果您检查Jinja提供的页面源代码，则“start”和“end”字符串很可能是正在提供的HTML的一部分，而不是angular动态插入这些值。

- w.brian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DonerKebab · Accepted Answer

似乎Jinja表达式：'{{}}' 与Angular表达式：'{{}}' 冲突。让我们尝试这个:

<html ng-app='numberApp'>
<head>
  <meta charset="utf-8">
  <title>Cool</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  <script>
  var numberApp = angular.module('numberApp', []);
// solved conflict with {{}} of jinja, now we use [[]] for angular expressions
numberApp.config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}]);
  numberApp.controller('numberCtrl', function($scope, $http){
      $scope.arr = [2, 4, 5, 6];
    });
  </script>
</head>
<body ng-controller="numberCtrl">
  <table>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
    <tr ng-repeat="number in arr">
      <td> {{ 'start' }} </td>
      <td> [[ number ]] </td>
      <td> {{ 'end' }} </td>
    </tr>
  </table>
</body>
</html>