ng-repeat在表格中生成空行

我正尝试使用angularjs，MVC和web-API创建单个页面应用程序。我正在使用“ng-repeat”来显示表中的所有记录，但它正在生成空白行。空白行的数量等于数据库中的记录数量。 API工作正常。另外当我打印$ scope.Students变量时，我可以在控制台中看到数据。据ng-repeat在表格中生成空行

索引页

<script src="~/Scripts/angular.min.js"></script> 
<script src="~/Scripts/angular-route.min.js"></script> 
<script src="~/MyScripts/script.js"></script> 

<h2>Home Page</h2> 

<body ng-app="appModule"> 
    <div> 
     <br /> 
     <a href="/#!/display">Read</a> &nbsp;&nbsp; 
     <a href="/#!/create">Create</a> &nbsp;&nbsp; 
     <a href="/#!/delete">Delete</a> &nbsp;&nbsp; 
     <br /> 
     <ng-view></ng-view> 
     <br /> 
    </div> 
</body>

HTML显示

<br /> 
{{message}} 
<br /><br /> 
<table border="1"> 
    <thead> 
     <tr> 
      <td> 
       ID 
      </td> 
      <td> 
       Name 
      </td> 
      <td> 
       City 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="Student in Students"> 
      <td> 
       {{ Student.StudentID }} 
      </td> 
      <td> 
       {{ Student.Name }} 
      </td> 
      <td> 
       {{ Student.City }} 
      </td> 
      <td> 
       <input type="button" value="Edit" ng-click="" /> 
      </td> 
      <td> 
       <input type="button" value="Delete" ng-click="" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<br /><br /> 
{{ errorMessage }}

角控制器

.controller("DisplayController", function ($scope, appService) { 
       $scope.message = "Display Page"; 

       getAll(); 
       //method to call angular service 
       function getAll() { 
        //service call 
        var serviceCall = appService.getStudents(); 
        serviceCall.then(function (response) { 
         //store response data to scope variable 
         $scope.Students = response.data; 
         console.log($scope.Students) 
        }, 
        function (error) { 
         $scope.errorMessage = error; 
        }) 
       } 
      })

View Page

来源

2017-06-06 lootfold

你可以复制一些在控制台打印的数据吗？ – tomek550

这是区分大小写你的数据应该是，

<td> 
    {{ Student.studentID }} 
</td> 
<td> 
    {{ Student.name }} 
</td> 
<td> 
    {{ Student.city }} 
    </td>

来源

2017-06-06 07:13:12 Sajeetharan

等等，你是怎么知道的...... – Icycool

你的图像显示它 – Sajeetharan

非常感谢！这是行得通的。但为什么这是一个较小的情况？我在表格中定义了“StudentID”，“Name”和“City”这两列。 – lootfold

ng-repeat在表格中生成空行

回答

相关问题