Question

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

索引页

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

角度控制器

.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

Answer 1

根据您的数据，它区分大小写，应该是，

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

ng-repeat在表格中生成空白行

1 个答案: