Question

我正在从api获取这种格式的数据，但是当我尝试使用angularjs将其绑定到表时，它正在创建空白空间而不是值。我还从一些Api那里获得了一张以上的表，请解释谁也将不同的数据表绑定到不同的表中。谢谢

{"Table": 
  [{ 
    "SchoolId":1, 
    "schoolname":"Microsoft",
    "SCHOOLCODE":"29911583", 
    "WEBSITE":"JLR",
    "USEREMAIL":"faucibus@aliquamiaculislacus.org", 
    "PHONE":"841-9331",
    "ADDRESS1":"682-5760 Felis Street", 
    "ISACTIVE":0, 
    "PLANTYPE":3 
  }] 
}

角度控制器

SMSApp.factory('GetStudentService', function ($http) {
    studobj = {};

    studobj.getAll = function () {
        var stud=[];

        stud = $http({ method: 'Get', url: 'http://localhost:58545/api/Student?Studentid=1' }).
            then(function (response) {
                return response.data;
            });
        return stud;
    };
    return studobj;
});

SMSApp.controller('studentController', function ($scope, GetStudentService) {
    $scope.msg = "Welcome from Controller";

    GetStudentService.getAll().then(function (result) {
        $scope.school = result;
        console.log(result);
    });

});

HTML代码

 <tbody ng-controller="studentController">
     <tr ng-repeat="schools in school track by $index">
         <td>{{schools.SchoolId}}</td>
         <td>{{schools.schoolname}}</td>
         <td>{{schools.SCHOOLCODE}}</td>
         <td>{{schools.WEBSITE}}</td>
         <td>{{schools.USEREMAIL}}</td>
      </tr>
 </tbody>

我会得到什么

Answer 1

命名数据school令人困惑。改为：

GetStudentService.getAll().then(function (data) {
    $scope.tableObj = data;
    console.log(data);
});

 <tbody ng-controller="studentController">
     <tr ng-repeat="school in tableObj.Table track by school.SchoolId">
         <td>{{school.SchoolId}}</td>
         <td>{{school.schoolname}}</td>
         <td>{{school.SCHOOLCODE}}</td>
         <td>{{school.WEBSITE}}</td>
         <td>{{school.USEREMAIL}}</td>
      </tr>
 </tbody>

从文档中：

最佳做法：：如果您使用的对象具有唯一的标识符属性，则应按此标识符而不是对象实例进行跟踪，例如item in items track by item.id。如果以后再加载数据，即使集合中的JavaScript对象已替换为新对象，ngRepeat也不必为其已呈现的项目重建DOM元素。对于大型集合，这可以显着提高渲染性能。

— AngularJS ng-repeat API Reference

Answer 2

更改 Angular Controller ：

SMSApp.controller('studentController', function ($scope, GetStudentService) {
    $scope.msg = "Welcome from Controller";

    GetStudentService.getAll().then(function (result) {

   /********************* Changed Here ********************/

        $scope.school = JSON.parse(result._body); // Or only JSON.parse(result)
        $scope.school = $scope.school.table; 
    });

});

以及您的HTML代码：

 <tbody ng-controller="studentController">
     <tr ng-repeat="schools in school track by $index">
         <td>{{schools.SchoolId}}</td>
         <td>{{schools.schoolname}}</td>
         <td>{{schools.SCHOOLCODE}}</td>
         <td>{{schools.WEBSITE}}</td>
         <td>{{schools.USEREMAIL}}</td>
      </tr>
 </tbody>

Answer 3

只需在您的控制器中将结果替换为result.Table，因为如果您正确地看到了它的响应，则它位于名为数组的“ Table”中。试试这个，您应该可以看到您的记录

SMSApp.controller('studentController', function ($scope, GetStudentService) {
    $scope.msg = "Welcome from Controller";

    GetStudentService.getAll().then(function (result) {
        $scope.school = result.Table;
        console.log(result);
    });

});

注意：我已经用问题中提到的响应替换了jsfiddle链接中的API调用。
JSFiddle链接：http://jsfiddle.net/zu8q7go6/9/

无法使用AngularJS将Json数据与表头绑定

3 个答案: