在角度控制器中迭代 JSON 数组

Question

我正在尝试遍历 Json 中的数组并在前端显示值。我已经给出了我的代码，但我无法弄清楚我到底错在哪里。我无法检索数组中的值（startDate，endDate）并在前端显示它们。

JSON

"reportTypeObligationTypes": [{
    "reportTypeId": null,
        "consolidationScopeId": 4009,
        "startDate": "2014-01-01",
        "endDate": "9999-12-31",
        "frequencyCode": "Q",
        "reportTypeLabel": null,
        "reportTypeCode": null,
        "consolidationScopeCode": "C",
        "frequencyLabel": "Quarterly"
}]

角度控制器

xxxApp.controller('reportListController', function ($scope, $http, $location, $routeParams) {


    var service_url = "/mdmservice/services/reportTypeEntities/" + $routeParams.id;
    $http.get(service_url).success(

    function (data, status, headers, config) {
        $scope.reportTypeEntities = data;
        angular.forEach($scope.reportTypeEntities, function (item) {
            console.log(item.reportTypeObligationTypes);
        })
    });

    $scope.gridOptions = {
        paginationPageSizes: [25, 50, 100, 200, 300, 400, 500, 1000],
        paginationPageSize: 25,
    };
    $scope.gridOptions.data = 'reportTypeEntities';
    $scope.gridOptions.enableFiltering = true;
    $scope.gridOptions.enableGridMenu = true;
    $scope.gridOptions.fastWatch = true;

    $scope.gridOptions.columnDefs = [{
        name: "entityName",
        width: "35%",
        cellTemplate: '<div style="margin-left: 5px;">' + '  <a href="#edit/{{row.entity.entityId}}">{{row.entity.entityName}}</a>' + '</div>'
    }, {
        name: "entityCode",
        width: "15%"
    }, {
        name: "codeType"
    }, {
        name: "Entity Type",
        field: "entityType.entityTypeName"
    }, {
        name: "reportingId"
    }, {
        name: "Country",
        field: "country.countryName"
    }, {
        name: "startDate",
        field: "reportTypeObligationTypes.startDate"
    }, {
        name: "endDate",
        field: "reportTypeObligationTypes.endDate"
    }, {
        name: "consolidationScopeCode",
        field: "reportTypeObligationTypes.consolidationScopeCode"
    }, {
        name: "frequencyLabel",
        field: "reportTypeObligationTypes.frequencyLabel"
    }, {
        name: "Delete",
        cellTemplate: '<div style="margin-left: 5px;">' + '  <a href="#delete/{{row.entity.entityId}}" class="glyphicon glyphicon-trash btn btn-danger"> Delete</a>' + '</div>',
        enableFiltering: false,
        enableSorting: false
    }];

})

HTML 页面 - Angular UI 网格

<div ng-app="xxxApp" ng-controller="reportListController">

<p class="heading">Entities with Reporting Obligation</p>

<!-- Entities list data table using - 'ui-grid' module  -->
<div ui-grid="gridOptions" class="myGrid" ui-grid-pagination
    ui-grid-selection ui-grid-resize-columns ui-grid-move-columns
    ui-grid-cellNav ui-grid-exporter></div>

Answer 1

在您的控制器中，分配$scope.reportTypeObligationTypes = [{JSON}]; 您的标签或指令前：

<div ng-repeat="item in reportTypeObligationTypes">
  <div>{{item.startDate}}</div>
  <div>{{item.endDate}}</div>
</div>

'item' 将代表数组中的每个 JSON 对象，您可以使用 item.(property)。引用每个对象属性。

编辑：尝试：

$scope.gridOptions = {
  data: $scope.myData,
  columnDefs: [
    { name: 'field1', displayName: 'pretty display name' },
    { name: 'field2', visible: false }
 ]
};