我是 Angularjs 的新手，刚刚尝试填充多个 json 值，但它不起作用

Question

        <div ng-controller="studentController" ng-repeat = "student in students | unique = 'RollNo' " > 
        <table  class="profile-info">
        <tr>
        <th>Roll No</th>
        <td>{{ student.RollNo }}</td>              
        </tr>
        <tr>
        <th>Class</th>
        <td>{{ student.Class }}</td>              
        </tr>  
        <tr>
        <th>Section</th>
        <td>{{ student.Section }}</td>              
        </tr>   
        <tr>
        <th>Sports</th>
        <td>{{ student.Sports }}</td>              
        </tr>  
        <tr>
        <th>other Interests</th>
        <td>{{ student.otherInterests }}</td>              
        </tr>                  
        </table>
        </div>
    <---- Angular Part---->
// Not able to Populate the Json Value using the Follwing Script // 
    <script>
    function studentController($scope,$http) {
    var url = "aboutme.json";
    $http.get(url).success( function(response) {
    $scope.students = response.data;
    });
    }
    </script>
<--- JSON PART --- >
[
   {
      "Class" : 1,
      "RollNo" : 1,
      "Section" : "A",
      "Sports" : "Football",
      "otherInterests" : "Music",
   },
  {
      "Class" : 12,
      "RollNo" : 2,
      "Section" : "B",
      "Sports" : "Counter-Strike",
      "otherInterests" : "Music",
   }
]

Answer 1

请参阅代码。希望这会有所帮助

function myCtrl($scope) {
    $scope.students = [{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music", },
{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", } ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div ng-app ng-controller="myCtrl">
        
        <table  class="table table-striped table-bordered">
          <tr>
            <th>Class</th>
            <th>Roll Number</th>
            <th>Section</th>
            <th>Sports</th>
            <th>Other Intrests</th>
          <tr>
          <tr ng-repeat="student in students">
            <td>{{student.Class}}</td>
            <td>{{student.RollNo}}</td>
            <td>{{student.Section}}</td>
            <td>{{student.Sports}}</td>
            <td>{{student.otherInterests}}</td>
          </tr>
                       
        </table>
        
</div>

Answer 2

您必须

在 HTML.So 中进行一些小更改，ng-repeat将根据您的解释工作。

1. 在 td 的tr上使用ng-repeat而不是整个div。
2. 确保$scope.students具有与帖子中JSON part中显示的相同JSON。

工作演示：

var myApp = angular.module('myApp',[]);
myApp.controller('studentController',function($scope) {
  $scope.students = [
   {
      "Class" : 1,
      "RollNo" : 1,
      "Section" : "A",
      "Sports" : "Football",
      "otherInterests" : "Music"
   },
  {
      "Class" : 12,
      "RollNo" : 2,
      "Section" : "B",
      "Sports" : "Counter-Strike",
      "otherInterests" : "Music"
   }
];
})

table,th,td {
  border:1px solid black;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="studentController"> 
<table class="profile-info">
    <tr>
        <th>Roll No</th>
        <th>Class</th>
        <th>Section</th>
        <th>Sports</th>
        <th>other Interests</th>
    </tr>
    <tr ng-repeat="student in students">
        <td>{{ student.RollNo }}</td>              
        <td>{{ student.Class }}</td>   
        <td>{{ student.Section }}</td>   
        <td>{{ student.Sports }}</td>  
        <td>{{ student.otherInterests }}</td>
    </tr>                  
</table>
</div>

Answer 3

<div ng-controller="studentController" ng-repeat = "student in students | unique = "RollNo" " > 

更改为

<div ng-controller="studentController" ng-repeat="student in students | unique = 'RollNo'" > 

或者和

{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music", },
{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", } ]

更改为

{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music"},
{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", } ]

Answer 4

对 tr 使用 ng-repeat 而不是div

<div ng-controller="studentController"  > 
        <table  class="profile-info">
        <tr><th>Roll No</th>
            <th>Class</th>
            <th>Section</th> 
            <th>Sports</th>  
            <th>other Interests</th>
        </tr>
        <tr ng-repeat = "student in students | unique = 'RollNo' ">      
            <td>{{ student.RollNo }}</td>              
            <td>{{ student.Class }}</td>              
            <td>{{ student.Section }}</td>              
            <td>{{ student.Sports }}</td>              
            <td>{{ student.otherInterests }}</td>              
        </tr>                  
        </table>
        </div>

Answer 5

打开 DevTools(按 F12(以查看错误。莫斯尔特可能只是您的 JSON 文件中的拼写错误。

[{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music"},
{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", }]

Answer 6

一个问题是ng-repeat在div而不是tr .

另一个是你打电话给$http.get(...).success.您需要致电$http.get(...).then