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

时间:2016-01-12 21:44:44

标签: angularjs angularjs-ng-repeat angularjs-service angularjs-controller angularjs-templates

模板文件没有显示服务文件中的数据,有人请检查代码并纠正我。谢谢。

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

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'
               }],
           }
           ]});

2 个答案:

答案 0 :(得分:1)

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

属性file.s是数组不是对象,没有file.id.s

尝试更改:

{{file.id.s.documentType}}

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

DEMO

答案 1 :(得分:0)

嗨,错误来自您引用对象的方式。你的对象结构如下:

{
           "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部分。 希望能解决它!