CODEWITHSUNDEEP
angularjsasp.net-web-apisingle-page-application
lootfold
lootfold

Reputation: 13

ng-repeat generates blank rows in the table

I am trying to create a single page application using angularjs, MVC and web-API. I am using "ng-repeat" to display all the records in a table, but it is generating blank rows. No of blank rows are equal to the no of records in the database. API is working fine. Also when I print the $scope.Students variable I can see the data in console.

Index page

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

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

Angular controller

.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

Upvotes: 1

Views: 748

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

It's case sensitive ,according to your data , it should be,

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

Upvotes: 4

Related Questions