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

【问题标题】：I am new to Angularjs, just tried populating multiple json value but it's not working我是 Angularjs 的新手，刚刚尝试填充多个 json 值，但它不起作用
【发布时间】：2016-11-10 07:08:43
【问题描述】：

        <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",
   }
]

【问题讨论】：

大师 devji 是什么错误？
你甚至在附近用逗号打错了：ng-repeat = "student in students | unique = "RollNo" "
在发布任何代码之前，您应该确保不存在语法错误。看起来你甚至没有运行它。
实际上我删除并尝试执行它不起作用
实际上我想将 Json 值填充到表中，但无法这样做。提前致谢

标签： javascript angularjs json mean-stack

【解决方案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>

【讨论】：

试过它只是在网站前端显示{{student.Class}}
检查你的代码，你错过了什么。检查浏览器控制台..你会发现你的错误......
感谢您的宝贵时间，这是我的 JSON 文件中的拼写错误

【解决方案2】：

您必须在 HTML 中进行一些小改动。因此，ng-repeat 将根据您的说明起作用。

在 td 的 tr 上使用 ng-repeat 而不是整个 div。
确保$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>

【讨论】：

感谢 json 部分存在语法错误。感谢您的宝贵时间

【解决方案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", } ]

【讨论】：

感谢您的宝贵时间，我在 JSON 文件中打错字了

【解决方案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>

【讨论】：

试过但没有成功 - 感谢您的宝贵时间
检查您的控制台是否有错误，如果有，请在此处发布

【解决方案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", }]

【讨论】：

感谢您的宝贵时间，这是我的 JSON 文件中的拼写错误

【解决方案6】：

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

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

【讨论】：