AngularJS：ng-repeat 不显示项目答案

【问题标题】：AngularJS: ng-repeat not show itemsAngularJS：ng-repeat 不显示项目
【发布时间】：2020-04-15 21:07:43
【问题描述】：

我试过AngularJS的代码如下：

var app = angular.module('MyApp', []);

app.controller('new_controller', function($scope) {
    $scope.people= [{
                        name: "GeekAgashi",
                        Age: 12,
                        attended: 1
                    }, {
                        name: "GeekSatoshi",
                        Age: 16,
                        attended: 0
                    }, {
                        name: "GeekNakumato",
                        Age: 14,
                        attended: 1
                    }];
});

在 HTML 文件中的代码：

<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
       <table>
            <tr>
                <td>Name</td>
                <td>Age</td>
            </tr>
            <tr ng-repeat="p in people">
                <td>{{p.name}}</td>
                <td>{{p.Age}}</td>
            </tr>
       </table>
</div>

在网页上，我只能得到我认为意味着数据传递成功的表格框架。但我无法获取表格项目：

<table>
    <tbody>
    <tr>
    <td>Name</td>
    <td>Age</td>
    </tr>
    <!-- ngRepeat: p in people -->
    <tr ng-repeat="p in people" class="ng-scope">
    <td></td>
    <td></td>
    </tr>
    <!-- end ngRepeat: p in people -->
    <tr ng-repeat="p in people" class="ng-scope">
    <td></td>
    <td></td>
    </tr>
    <!-- end ngRepeat: p in people -->
    <tr ng-repeat="p in people" class="ng-scope">
    <td></td>
    <td></td>
    </tr>
    <!-- end ngRepeat: p in people -->
    </tbody>
</table>

我只是想知道这是一个错误还是我的代码有问题，或者浏览器 (chrome v79) 不支持它。

附录：我用 Django 编写后端，我发现如果我直接运行纯 HTML，表格是可见的。如果我通过 Django 服务器运行它，就会出现问题。由于我是前端的新手，我想知道问题是否出在 CSS 文件或与其他本地 javascript 冲突？

【问题讨论】：

标签： javascript angularjs django

【解决方案1】：

        <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>

        <div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
            <table>
                <tr>
                    <td>Name</td>
                    <td>Age</td>
                </tr>
                <tr ng-repeat="p in people">
                    <td>{{p.name}}</td>
                    <td>{{p.Age}}</td>
                </tr>
            </table>
    </div>

    <script>
    var app = angular.module('MyApp', []);

    app.controller('new_controller', function($scope) {
        $scope.people= [{
                            name: "GeekAgashi",
                            Age: 12,
                            attended: 1
                        }, {
                            name: "GeekSatoshi",
                            Age: 16,
                            attended: 0
                        }, {
                            name: "GeekNakumato",
                            Age: 14,
                            attended: 1
                        }];
    });
    </script>

    </body>
    </html>

请检查上述代码是否正在运行？

【讨论】：

如果我把它写在一个新的 HTML 文件中，它就可以工作。但是当我将它实现到我的 HTML 文件时它不起作用。（即使使用新的脚本、应用程序或控制器。）
td>
如果是，请帮我提供 Angular 版本号？
抱歉回复晚了，终于查到这个问题的原因是模板冲突了。

【解决方案2】：

我将您的代码复制并粘贴到已截断的代码（Angulerjs 版本 1.7.5）中，它似乎可以正常工作。

var app = angular.module('MyApp', []);

app.controller('new_controller', function($scope) {
  $scope.people = [{
    name: "GeekAgashi",
    Age: 12,
    attended: 1
  }, {
    name: "GeekSatoshi",
    Age: 16,
    attended: 0
  }, {
    name: "GeekNakumato",
    Age: 14,
    attended: 1
  }];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="sidebar-pane" ng-app="MyApp" id="flight_info" ng-controller="new_controller">
  <table>
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
    <tr ng-repeat="p in people">
      <td>{{p.name}}</td>
      <td>{{p.Age}}</td>
    </tr>
  </table>
</div>

在您的问题中，您指定您使用的是django。我假设您正在使用它来检索 people 数据（如果我错了，请纠正我）。你能告诉我们你是如何检索数据的吗？这可能只是async 操作的情况，因此在呈现页面时数据不存在。

【讨论】：

【解决方案3】：

原因是django 和angularJS 模板冲突。解决方案可以在this question 中找到。

【讨论】：