角度模板不显示服务文件数据

Question

模板文件未显示服务文件中的数据，有人可以检查代码并纠正我。谢谢。

我还检查了控制器是否传递了数据，这正在发生。但是除了索引之外什么都没有显示。我以多种方式尝试了数据绑定，但问题似乎仍在重复。

---

html

<div class="panel3 panel-primary">
    <div class="panel-heading">Documents</div>
    <table class="table table-bordered table-condensed table-striped">

        <tr>
            <th>Serial Number</th>
            <th>Document Type</th>
            <th>Document Date</th>
            <th>Status</th>
            <th>Last Update Date</th>
        </tr>
        <tr ng-repeat="file in selectedDoc">
            <td>{{$index+1}}</td>
            <td>{{file.id.s.documentType}}</td>
            <td>{{file.id.s.documentDate}}</td>
            <td>{{file.id.s.status}}</td>
            <td>{{file.id.s.lastUpdateDate}}</td>
        </tr>

    </table>
</div>

---

控制器

"use strict";

angular.module("fleetDocumentsModule").controller("fleetDocumentsController",
    ['$scope', 'fleetDocumentsService',

        function ($scope, fleetDocumentsService) {


            $scope.selectedDoc = fleetDocumentsService.getDocuments();
            console.log("inside service file", $scope.selectedDoc)
        }]);

---

服务文件

"use strict";

angular.module("fleetDocumentsModule").service("fleetDocumentsService",

       function () {
           this.getDocuments = function () {
               return documents;
           };
           var documents = [
               {
                   "id": "1",
                   "s":[{                         
                           "documentType": 'POD',
                           "documentDate": '01-12-2015',
                           "status": 'Printed',
                           "lastUpdateDate": '28-12-2015'
                       },
                   {                       
                           "documentType": 'SIM',
                   "documentDate": '01-12-2015',
                   "status": 'Printed',
                   "lastUpdateDate": '28-12-2015'
               }                      
              ]},
                   {
                       "id": "2",                      
                       "s": [{
                            "documentType": 'DOC',
                            "documentDate": '01-12-2015',
                            "status": 'Printed',
                            "lastUpdateDate": '28-12-2015'
                        },
                    {
                        "documentType": 'LLTM',
                        "documentDate": '01-12-2015',
                        "status": 'Printed',
                        "lastUpdateDate": '28-12-2015'
                    }
                       ]},                   
                   {
                       "id": "3",                     
                       "s": [{
                           "documentType": 'TOM2',
                           "documentDate": '01-12-2015',
                           "status": 'Printed',
                           "lastUpdateDate": '28-12-2015'
                       },
                       {
                           "documentType": 'TOM3',
                           "documentDate": '01-12-2015',
                           "status": 'Printed',
                           "lastUpdateDate": '28-12-2015'
                       },
                   {
                       "documentType": 'TOM4',
                       "documentDate": '01-12-2015',
                       "status": 'Printed',
                       "lastUpdateDate": '28-12-2015'
                   }
                       ]},
           {
               "id": "4",
               "s":[{
                   "documentType": 'TTL',
                   "documentDate": '01-12-2015',
                   "status": 'Recieved',
                   "lastUpdateDate": '28-12-2015'
               }],
           },
           {
               "id": "5",
               "s":[{
               "documentType": 'RET',
               "documentDate": '01-12-2015',
               "status": 'Printed',
               "lastUpdateDate": '28-12-2015'
               }],
           }
           ]});

Answer 1

您没有在每个对象的视图中使用正确的属性

属性file.s 是数组而不是对象并且没有file.id.s

尝试改变：

{{file.id.s.documentType}}

到

{{file.s[0].documentType}}

DEMO

Answer 2

您好，错误来自您引用对象的方式。你的对象结构是这样的：

{
           "id": "4",
           "s":[{
               "documentType": 'TTL',
               "documentDate": '01-12-2015',
               "status": 'Recieved',
               "lastUpdateDate": '28-12-2015'
           }],
       }

当您尝试以这种方式引用它时：

<tr ng-repeat="file in selectedDoc">
        <td>{{$index+1}}</td>
        <td>{{file.id.s.documentType}}</td>
        <td>{{file.id.s.documentDate}}</td>
        <td>{{file.id.s.status}}</td>
        <td>{{file.id.s.lastUpdateDate}}</td>
    </tr>

而不是这样：

<tr ng-repeat="file in selectedDoc">
        <td>{{$index+1}}</td>
        <td>{{file.s[0].documentType}}</td>
        <td>{{file.s[0].documentDate}}</td>
        <td>{{file.s[0].status}}</td>
        <td>{{file.s[0].lastUpdateDate}}</td>
    </tr>

您不需要 id 部分。 希望能解决！