javascript - AngularJS:通过特定 JSON 文件中的新页面中的单击操作显示数据

Question

我有两个图像的缩略图，并且有两个 JSON 文件(名为 dataOne.json 和 dataTwo.json)。当用户单击其中一张图像时，我想将相应 JSON 文件的所有元素列出到一个新网页中。新的网页有一个药丸。

HTML:

<div id = "Cities" class = "neighborhood-guides">
    <div class = "container" ng-controller="CityController">
        <div class = "thumbnail" ng-click = "city(dataOne)">
            <image src = "Images/NYC.jpg"/>
        </div>
        <div class = "thumbnail" ng-click = "city(dataTwo)">
            <image src = "Images/LA.jpg"/>
        </div>
    </div>
</div>

HTML(新):

<div class = "content" id = "content">
    <div class="list-group-item">
        <section class="tab" ng-controller = "TabController as tab">
            <ul class="nav nav-pills">
                <li ng-class="{ active: tab.isSet(1) }">
                    <a ng-click = "tab.setTab(1)" href>Categories</a>
                </li>
                <li ng-class="{ active: tab.isSet(2) }">
                    <a ng-click = "tab.setTab(2)" href>Interactive Guide</a>
                </li>
                <li ng-class="{ active: tab.isSet(3) }">
                    <a ng-click = "tab.setTab(3)" href>List of all places</a>
                </li>
            </ul>
            <div ng-show = "tab.isSet(1)"></div>
            <div ng-show = "tab.isSet(2)">
                <blockquote>This is where I want the data</blockquote>
            </div>
            <div ng-show = "tab.isSet(3)">
                <blockquote></blockquote>
            </div>
        </section>
    </div>
</div>

app.js

function() {
    var app = angular.module('app', []);

    app.controller('CityController', function(){
        $scope.city = function(param) {
        $http.get(param+'.json', param).success(
        function(data){
            //What should I do here?
            console.log(data);
        }
        ).error();
    } 
});

app.controller('TabController', function(){
    this.tab = 1;

    this.setTab = function(newValue){
        this.tab = newValue;
    };

    this.isSet = function(tabName){
        return this.tab === tabName;
    };
);

如何通过第1页的点击，从json文件中获取数据并显示在新页面的第2个药丸中？

Answer 1

您可以定义一个保存 json 数据的服务工厂。请看看这个类似问题的答案: https://stackoverflow.com/a/21920241/4213391