CODEWITHSUNDEEP
javascriptjqueryjsonangularjs
user5499130
user5499130

Reputation:

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

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?

Upvotes: 1

Views: 941

Answers (1)

okanozeren
okanozeren

Reputation: 555

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

Upvotes: 1

Related Questions