CODEWITHSUNDEEP
javascriptjqueryjsonangularjs
user5499130
user5499130

Reputation:

AngularJS: Using "ng-click" and getting a specific 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 window. How do I achieve this?

HTML: 

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

Upvotes: 1

Views: 149

Answers (2)

user84
user84

Reputation: 875

In you code in front of ng-click you have to put a function name with/without parameter.

<div class = "thumbnail" ng-click = "city(NYC)">
        <image src = "Images/NYC.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city(LA)">
        <image src = "Images/LA.jpg"/>
</div>

then from there the answer depends on where are you json files. In a good case scenario it is the web then you have to use $http service in your controller like the following:

yourApp.controller('yourController', /* injections: e.g $http.... */){

$scope.city = function(param) {
  $http.get('theURLaddressOfYourJSONFiles', param).succes(
    function(data){
    // do somehhitng with this data e.g.
    console.log(data);
    }
  ).error();
}

Upvotes: 2

messerbill
messerbill

Reputation: 5629

<div id = "Cities" class = "neighborhood-guides">
<div class = "container" ng-controller="yourController">

                <div class = "thumbnail" ng-click = "yourControllerCallMethod(param)">
                    <image src = "Images/NYC.jpg"/>
                </div>
                 <div class = "thumbnail" ng-click = "yourControllerCallMethod(param)">
                    <image src = "Images/LA.jpg"/>
                </div>
              </div>
</div>

and the angular controller:

yourApp.controller('yourController', /* injections.... */){

$scope.yourControllerCallMethod(param) {
  //do stuff
}

this should work - do stuff needs to check which param was set and open the new window. Greetings

Upvotes: 0

Related Questions