AngularJS: ng-repeat not show items

Question

I tried the code of AngularJS as follows:

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
                    }];
});

In HTML file the code:

<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>

On the webpage, I can only get the table frame which I think means that the data is successfully passed. But I cannot get the table items:

<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>

I am just wondering if it is a bug or there is something wrong with my code, or the browser (chrome v79) does not support it.

Appendix: I write the backend in Django and I found that if I directly run the plain HTML, the table is visible. The problem happens if I run it through a Django server. Since I am a green hand to the frontend, I am wondering if it is possible that the problem lies in the CSS file or the confliction with other local javascript?

score 1 · Answer 1 · answered Dec 25 '19 at 06:17

        <!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>

Kindly check if the above code is running?

It works if I write it in a new HTML file. But it didn't work when I implemented it to my HTML file. (Even with a new script, app or controller.) — natsuapo, Dec 25 '19 at 06:57
Sorry for late reply, I finally find out the reason of this problem that the template is conflict. — natsuapo, Jan 22 '20 at 12:16

score 1 · Answer 2 · answered Dec 26 '19 at 09:04

I copy & paste your code to the snipped (Angulerjs version 1.7.5) and it seems like it's working.

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>

In your question you specify that you are using django. I assume that you are using it to retrieve the people data (correct me if I'm wrong). Can you please show us how you retrieve the data? This might just be a case of async operation, so the data isn't there at the time the page is rendered.

score 0 · Accepted Answer · answered Jan 22 '20 at 12:18

0

The reason is a confliction of django and angularJS templates. The solution could be find in this question.

answered Jan 22 '20 at 12:18

natsuapo

585
9
22

AngularJS: ng-repeat not show items

3 Answers3