Question

我试图在angularjs中访问模板中的嵌套json数据。我附上了我所拥有的东西。重复部分正在运行，但{{title}}不是。

示例JSON

[{

            "title": "Sample Campaign Title",
            "dateStart" : "Aug 1, 2014",
            "dateEnd" : "Aug 31, 2014",
            "results" : [
                {
                    "tableTitle": "Performance",
                    "thead": [
                        { "tr" : "Campaign" },
                        { "tr" : "Impressions" },
                        { "tr" : "Clicks" },
                        { "tr" : "CTR" },
                        { "tr" : "Cost" },
                        { "tr" : "Actions"  }

                    ],

                    "values" : [
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "$753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        }
                    ]
                },

                {
                    "tableTitle": "Table Number 2",
                    "thead": [
                        { "tr" : "Campaign" },
                        { "tr" : "Impressions" },
                        { "tr" : "Clicks" },
                        { "tr" : "CTR" },
                        { "tr" : "Cost" },
                        { "tr" : "Actions"  }

                    ],

                    "values" : [
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "134",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        }
                    ]
                },

                {
                    "tableTitle": "Table Number 3",
                    "thead": [
                        { "tr" : "Campaign" },
                        { "tr" : "Impressions" },
                        { "tr" : "Clicks" },
                        { "tr" : "CTR" },
                        { "tr" : "Cost" },
                        { "tr" : "Actions"  }

                    ],

                    "values" : [
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "134",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        }
                    ]
                }
            ]

    }]

厂

angular.module('reportApp')

.factory('Reports', ['$http', function ($http) {

    return {
        getResults: function(callback) {
            $http.get('sampleData/campaign.json').success(callback);
        }
    }

}]);

控制器

.controller('ResultsCtrl', ['$scope', 'Reports', function($scope, Reports){

    Reports.getResults(function(data) {
        $scope.reports = data;
    });

 }])

模板，重复正在运行，{{title}}不是

<header class="main-header">
        <div class="row">
            <div class="small-12 columns">

                <h1>{{title}}</h1>

            </div>

        </div>

</header>
      <div ng-repeat="report in reports">
            <div class="row vert1" ng-repeat="table in report.results">
                <div class="small-12 columns">
                    <h2>{{ table.tableTitle }}</h2>
                    <table>
                        <thead>
                            <tr>
                                <th ng-repeat="thead in table.thead">{{ thead.tr }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="tr in table.values">
                                <td>{{tr.Campaign}}</td>
                                <td>{{tr.Impressions}}</td>
                                <td>{{tr.Clicks}}</td>
                                <td>{{tr.CTR}}</td>
                                <td>${{tr.Cost}}</td>
                                <td>{{tr.Actions}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

Answer 1

title位于广告系列数据的第一个元素中。所以它会是scope.title = data[0].title。

Answer 2

有一件事我觉得有点好笑的是你在标题中设置了ng-controller。也许尝试将其从标题中取出并将控制器放在div中。

从嵌套的json中显示angularjs模板中的元素

2 个答案: