0

I have a list of buttons acting as a beer draft list displaying some information loaded from a json file. When a user clicks on a button I want to go to a page that will display more details about the beer using the same json file. How would I pass the json data of the button pressed on to the new page to use?

How I get and use the data to display the buttons is below, as is the data.

<script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope, $http) {
          $http.get('https://api.myjson.com/bins/299d6').success(function(response){
            $scope.beerList = response;});
        });
    </script>

<div ng-app="myApp" ng-controller="myController">
        <div class='list-group'>
            <button type='button' class='btn btn-block btn-text-color' ng-repeat="beer in beerList">
                <h4 class='list-group-item-heading'>{{beer.Beer}}</h4>
                <p class='list-group-item-text'>{{beer.Style + ' / $' + beer.Price}}</p>
            </button>
        </div>
    </div>

json

[
{
    "Beer": "Lumberyard IPA",
    "Style": "IPA",
    "Pour": "14",
    "ABV": "6.9",
    "Price": "4.75"
},
{
    "Beer": "Bud Light",
    "Style": "Lager",
    "Pour": "14",
    "ABV": "4.5",
    "Price": "3.75"
},
{
    "Beer": "Left Hand Milk Stout",
    "Style": "Stout",
    "Pour": "14",
    "ABV": "6.5",
    "Price": "4.75"
},
{
    "Beer": "Kellerweiss",
    "Style": "Hefe",
    "Pour": "14",
    "ABV": "5.6",
    "Price": "4.75"
},
{
    "Beer": "Great White",
    "Style": "White Ale",
    "Pour": "14",
    "ABV": "5.5",
    "Price": "4.75"
},
{
    "Beer": "Bourbon County",
    "Style": "Imp. Stout",
    "Pour": "12",
    "ABV": "10.0",
    "Price": "9.00"
}
]
SakthiSureshAnand
  • 1,324
  • 16
  • 32
Ben Kenobi
  • 1
  • Are you using `$stateProvider` (`UI Router`) for routing? Could you show or give us more information about your routing config? – charliebrownie Oct 29 '15 at 00:48
  • You can have a look at this other post, which has to do with what you are asking: http://stackoverflow.com/questions/28248236/angular-ui-router-passing-data-between-states-without-url . You have to use the `$stateProvider` to pass your beer object from one view to another. – charliebrownie Oct 29 '15 at 01:45

0 Answers0