Getting selected option in AngularJS

Question

I am generating a thumbnail list of photos (using ng-repeat), and under each one of these photos I have two buttons, one to view more details and another to purchase.

I am finding a problem how to map the buttons. Basically I want that when a user clicks on the purchase button underneath Photo A, in the booking form (which is a different view), he/she will see the details pertaining to Photo A, rather than having the user select the photo again from some drop down. The list of photos is coming from a JSON string.

Mainly the difficulty I am finding is how to pass the details of which button was clicked to the booking view so that I would be able to display the details of the selected photo immediately.

I am new to AngularJS and am not sure if there is a simple way that can be done.

My HTML is this:

<div class="col-md-4 ng-scope" ng-repeat="photo in photos">
<div class="thumbnail">
  <img src="{{photo.thumbnail}}" alt="{{photo.title}}">
  <div class="caption">
    <h4 class="ng-binding">{{photo.title}}</h4>
    <p><button type="button" class="btn btn-default">Photographer</button><br ><button type="button" class="btn btn-default">Purchase</button></p>
  </div>
</div>

Angular JS:

App JS

angular
.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('photos', {
            url: '/photos',
            templateUrl: 'templates/photos.html',
            controller: 'photosCtrl',
            resolve: { photos: ['$http', function($http){
                    return $http.get('api/photos.json').then(function(response){
                        return response.data;
                    });
            }]}
        })      

}]);

photosCtrl JS:

angular
.module('app')
.controller('photosCtrl', ['$scope', 'photos', function($scope, photos) {
    $scope.photos = photos;
}]);

Answer 1

using ngClick directive is a good idea as @Ashesh suggested

Assuming the JSON containing your photos comes with a bunch of photo object, I'd rather add two functions to the scope of photosCtrl like this:

angular.module('app')
  .controller('photosCtrl', ['$scope', 'photos', function($scope, photos) {
    $scope.photos = photos;

    $scope.showDetailsOf = function(photo) {
        // photo argument is the actual object of which 'details' button was pressed
        // coming from the ngRepeat in your template example
        console.log('show details of ' + photo.title);
    }

    $scope.purchase = function(photo) {
        // same as above
        console.log('purchase ' + photo.title);
    }
}]);

The template should look like this:

<button type="button" class="btn btn-default" ng-click="showDetailsOf(photo)">Details</button>
<button type="button" class="btn btn-default" ng-click="purchase(photo)">Purchase</button>

Furthermore you can factor this logic out to eg a photoService so that your controller won't contain business logic which is always preferable as both of your controller and the service can be covered by tests more easily, because you decouple them. Hope this helps.

Answer 2

Use ngClick :

<p><button type="button" class="btn btn-default" ng-click="photo.showPhotographer()">Photographer</button><br ><button type="button" class="btn btn-default" ng-click="photo.buy()">Purchase</button></p>

And ofcourse, photo.showPhotographer() etc. can do what you like them to do:

function Photo() { // the photo object
    this.buy() {
        // api call to buy with the id of the photo or window.navigate('buy_url?id=' + this.id), etc.
    }
}