AngularJS ng-click to display values on clicking

Question

New to angular. So Here is what I am trying to achieve:

Do an $http get request to get a list of albums and show them in the UI as a list of URLs (Example of the response is ['album1', 'album2', 'album3']
When I click on album 1, I need to make a $http get request for album 1. When I click on album 2, I need to make a $http get request for album 2 and so on and display that response accordingly.

Here is what my code looks like. ( I know that the first get call will be made regardless but the subsequent calls will be on click events.)

// module
(function () {
'use strict';

angular.module('app.fileUploadForm', [
    'app.layout',
    'ui.router',
    'angularFileUpload'
]).config(FileUploadFormConfiguration);

FileUploadFormConfiguration.$inject = ['$stateProvider'];
function FileUploadFormConfiguration($stateProvider) {

    $stateProvider.state('fileUploadForm', {
        url: '/fileUploadForm',
        parent: 'default',
        templateUrl: 'app/fileUploadForm/fileUploadForm.html',
        controller: 'FileUploadFormController as vm'
    });
}
})();


// Controller
(function (){

angular.module('app.fileUploadForm').controller('FileUploadFormController', FileUploadFormController);

FileUploadFormController.$inject = ['$http', '$log', '$scope', '$rootScope', 'APP_CONFIG'];
function FileUploadFormController ($http, $log, $scope, $rootScope, APP_CONFIG){

    var vm = this;
    vm.albums = init;
    vm.albums.tracks = getAlbumTracks;
    vm.newFunction = newFunction;

    return init();
    function init(){
     $http.get('http://localhost:8080/api/albums').then(function(responseData){
            // Parse the json data here and display it in the UI
            $scope.vm.albums = responseData.data;
            $log.debug(angular.toJson(responseData, true));

//              console.log(vm.albums.tracks);
            return vm.albums;
        })
    }

    function getAlbumTracks(album, $scope){
        $http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){
            //parse each album and get the track list
            $scope.vm.albums.tracks = vm.albums.tracks.concat(trackResponse);
            return vm.albums.tracks;
        })
    }

}

// HTML code:
<div class="wrapper wrapper-content">
hello!
<div>
    <ul>
        <li ng-repeat="album in vm.albums"><a href ng-click="vm.getAlbumTracks(album)">{{album}}</a></li>
        <ul>
            <li ng-repeat="track in vm.albums.tracks"><a href ng-click="vm.displayForm(track)">{{track}}</a></li>
        </ul>
    </ul>
</div>

I can see the list of albums but the second request to fetch the track info after clicking the album doesn't print anything. Any clue how to achieve that ? Thanks

@AlexRumbaNicked I don't have it yet, since first the getAlbumTracks itself doesn't work so didn't want to throw it here :) — noobcoder
– noobcoder, Commented Feb 26, 2016 at 22:25
@noobcoder You will probably get an accurate answer much faster if you create a sample project in JS Fiddle or Plunkr. Looking at the code you posted it's clear that important parts are missing, so it's hard to give an answer that is not a guess. — Luis Perez
– Luis Perez, Commented Feb 26, 2016 at 22:30
@noobcoder you are right. That part of the code would be mocked by replacing the $http.get() calls with $q.when(["simulated result"]). — Luis Perez
– Luis Perez, Commented Feb 26, 2016 at 22:35

Sunil Lama · Accepted Answer · 2016-02-26 23:54:27Z

1

The problem was solved by one line answer.

changing:

vm.albums.tracks = getAlbumTracks; to vm.getAlbumTracks = getAlbumTracks;

answered Feb 26, 2016 at 23:54

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

noobcoder Over a year ago

Thanks @Alex Rumba Nicked for offering to have a private chat and figuring out the goof up. Works fine now.

Pankaj Parkar · Accepted Answer · 2016-02-26 22:19:15Z

1

While calling function of controller you should use controller alias before them. Like they are also belongs to this context of controller.

ng-click="vm.getAlbumTracks(album)"
ng-click="vm.displayForm(track)"

answered Feb 26, 2016 at 22:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

noobcoder Over a year ago

Thanks, I realized and I did that. Ill update my post. But it still didn't work

Collectives™ on Stack Overflow

AngularJS ng-click to display values on clicking

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related