ng-repeat génère des lignes vides dans la table

J'essaie de créer une application monopage en utilisant angularjs, MVC et web-API. J'utilise "ng-repeat" pour afficher tous les enregistrements d'une table, mais elle génère des lignes vides. Les lignes vides sont égales au nombre d'enregistrements dans la base de données. L'API fonctionne bien. Aussi lorsque j'imprime la variable $ scope.Students je peux voir les données dans la console.ng-repeat génère des lignes vides dans la table

page Index

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

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

contrôleur angulaire

.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

Source

2017-06-06 lootfold

Pouvez-vous copier certaines des données imprimées dans la console? – tomek550

Il est sensible à la casse, selon à vos données, il devrait être,

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

Source

2017-06-06 07:13:12 Sajeetharan

attends, comment tu as su ... – Icycool

Ton image le montre – Sajeetharan

Merci beaucoup !! Cela fonctionne. Mais pourquoi est-ce dans un cas plus petit? J'ai difiné les colonnes "StudentID", "Name" et "City" dans ma définition de table. – lootfold

ng-repeat génère des lignes vides dans la table

Répondre

Questions connexes