如何使用 AngularJS 的 ng-repeat 绑定从 Dataset 转换为 HTML 表的 JSON 数据？答案

【问题标题】：How to bind JSON data which is converted from Dataset to HTML table using AngularJS's ng-repeat?如何使用 AngularJS 的 ng-repeat 绑定从 Dataset 转换为 HTML 表的 JSON 数据？
【发布时间】：2017-11-22 19:19:22
【问题描述】：

{"tblSupplierMaster":[{"SupplierID":1,"SupplierCode":"VLTPX01","SupplierName":"TOOLEX PRECISION SDN BHD","State":"Selangor","Country":"Malaysia" },{"SupplierID":2,"SupplierCode":"VSLBK01","SupplierName":"LEE BOON KWANG NRIC 710902-10-5407","State":"Selangor","Country":"Malaysia"}, {"SupplierID":3,"SupplierCode":"VLGXX03","SupplierName":"GLOMATION SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":4," SupplierCode":"VLJJL01","SupplierName":"JJ-LAPP CABLE (M) SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":5,"SupplierCode" :"VLIXX01","SupplierName":"INDPRO (MALAYSIA) SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":6,"SupplierCode":"VLABX01", "SupplierName":"AMMERAAL BELTECH SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":7,"SupplierCode":"VLAXX05","SupplierName":"ALSIGNOL SDN BHD","State":"Selangor","Country":"Malaysia"},{"SupplierID":8,"SupplierCode":"VSJYE01","SupplierName":"J & Y ENGINEERING WORKS","State" :"雪兰莪","国家" :"Malaysia"},{"SupplierID":9,"SupplierCode":"VLSLS01","SupplierName":"SLS BEARINGS (MALAYSIA) SDN BHD","State":"Selangor","Country":"Malaysia" },{"SupplierID":10,"SupplierCode":"VEKKT01","SupplierName":"KEAN KEONG TIRE & BATTERY SERVICES","State":"Selangor","Country":"Malaysia"}]}

上面是通过Webservice转换的DataSet数据，如下代码

    public class SupplierWebService : System.Web.Services.WebService
{

    [WebMethod]
    public void fnGetSupplier()
    {
        DataSet dsSupplierMaster = null;
        clsPurchasingBO obj = new clsPurchasingBO();
        dsSupplierMaster = clsPurchasingBL.fnGetSupplierMaster(obj);
        //Context.Response.Write( DataSetExt.GetJSON(dsSupplierMaster));
        Context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(dsSupplierMaster));
        //return Newtonsoft.Json.JsonConvert.SerializeObject(;
    }   
}

我想在我的HTML表格中绑定上面的数据，下面是我的尝试：

<html>
<head>
    <title></title>
</head>
<body ng-app="SupplierModule" >
    <div ng-controller="SupplierController">
        <table border="1">
            <thead>
                <tr>
                    <th>
                        SupplierID
                    </th>
                    <th>
                        SupplierCode
                    </th>
                    <th>
                        SupplierName
                    </th>

                    <th>
                        State
                    </th>

                    <th>
                        Country
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="supplier in Suppliers">
                    <td><label ng-repeat="n in supplier.tblSupplierMaster">{{n.SupplierID}}</label></td>
                    <td>{{supplier.SupplierCode}}</td>
                    <td>{{supplier.SupplierName}}</td>
                    <td>{{supplier.State}}</td>
                    <td>{{supplier.Country}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../JS/angular.min.js"></script>
    <script src="../JS/angular-route.min.js"></script>
    <script src="../Controller/SupplierController.js"></script>
</body>
</html>

脚本（控制器）如下：

/// <reference path="../JS/angular-route.min.js" />
/// <reference path="../JS/angular.min.js" />
var app = angular.module("SupplierModule", []);
app.controller("SupplierController", function ($scope, $http) {
    $http.get('/Code/SupplierWebService.asmx/fnGetSupplier')
    .then(function (response) {
        $scope.Suppliers = response.data; debugger;
    });

});

我的观察

我观察到问题在于从 dataSet 转换的 JSON 数据，因为它的数据表名称“tblSupplierMaster”包含在返回数据中，这就是它不绑定的原因。

以下是截图：

【问题讨论】：

你可以这样做：$scope.Suppliers = response.data.tblSupplierMaster;
感谢 Prerak，正是我想要的。

标签： angularjs arrays html-table angularjs-ng-repeat

【解决方案1】：

由于您需要访问 JSON 响应中返回的数组，您需要这样做：$scope.Suppliers = response.data.tblSupplierMaster;

【讨论】：