AngularJS: Displaying data through a click action in a new page from a speific JSON file

Question

I have a thumb-nail view of two images and I have two JSON files(named dataOne.json and dataTwo.json). When the user click on one of the images, I want to list out all the elements of the respective JSON file into a new web page. The new web page has a pill.

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(new) :

<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;
    };
);

How do I get the data from the json file, through the click from page 1 and display it in the pill 2 of the new page?

you can use the $rootScope. inject it to that two controllers. create a variable in the CityController to the $rootScope which holds your data and get and use in the TabController from the $rootScope again. — okanozeren, Oct 29 '15 at 09:13

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

you can define a service factory which holds the json data. please take a look this answer for similar question: https://stackoverflow.com/a/21920241/4213391

edited May 23 '17 at 12:04

Community

1
1

answered Oct 29 '15 at 09:17

okanozeren

555
4
10

AngularJS: Displaying data through a click action in a new page from a speific JSON file

1 Answers1