Javascript AngularJS:在一个特定JSON文件的新页面中通过点击操作显示数据

Javascript AngularJS:在一个特定JSON文件的新页面中通过点击操作显示数据,javascript,jquery,json,angularjs,Javascript,Jquery,Json,Angularjs,我有两个图像的缩略图视图,还有两个JSON文件(名为dataOne.JSON和dataTwo.JSON)。当用户单击其中一个图像时,我想在一个新的网页中列出相应JSON文件的所有元素。新网页有一个药丸 HTML: 如何通过单击页面1从json文件中获取数据并将其显示在新页面的页面2中?您可以定义一个保存json数据的服务工厂。请看一下类似问题的答案: 您可以使用$rootScope。将其注入到这两个控制器中。在CityController中为$rootScope创建一个变量,该变量保存您的数据,

我有两个图像的缩略图视图,还有两个JSON文件(名为dataOne.JSON和dataTwo.JSON)。当用户单击其中一个图像时,我想在一个新的网页中列出相应JSON文件的所有元素。新网页有一个药丸

HTML:


如何通过单击页面1从json文件中获取数据并将其显示在新页面的页面2中?

您可以定义一个保存json数据的服务工厂。请看一下类似问题的答案:

您可以使用$rootScope。将其注入到这两个控制器中。在CityController中为$rootScope创建一个变量,该变量保存您的数据,并再次从$rootScope获取和使用TabController。
<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>
<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>
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;
    };
);