AngularJS ng-click在點擊時顯示數值

新增角度。所以這是我想實現：AngularJS ng-click在點擊時顯示數值

做一個$ HTTP GET請求來獲取相冊列表，並在UI中顯示他們作爲URL列表（響應的例子是[「album1」， 'album2'，'album3']
當我點擊專輯1時，我需要爲專輯1做一個$ http get request。當我點擊專輯2時，我需要爲專輯2做一個$ http get請求等，並顯示相應的這種反應。

這裏是我的代碼看起來像。（我知道，第一個GET通話將被製成無關，但後續調用將在點擊的事件。）

// 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>

我可以看到專輯的名單，但點擊專輯不打印任何東西后獲取曲目信息的第二請求。任何線索如何實現？謝謝

來源

2016-02-26 noobcoder

我沒有看到displayForm功能的任何地方:) –

@AlexRumbaNicked我沒有它，因爲首先getAlbumTracks本身並沒有工作，所以沒想要把它扔在這裏:) – noobcoder

@AlexRumbaNicked讓我們只是說現在的displayForm表示hello world，但基本上它會在點擊軌道時顯示一個表格 – noobcoder

該問題已通過單行答案解決。

改變：

vm.albums.tracks = getAlbumTracks;到vm.getAlbumTracks = getAlbumTracks;

來源

2016-02-26 23:54:27

謝謝@Alex Rumba Nicked提供私人聊天，並搞清楚這件事情。現在工作正常。 – noobcoder

在調用控制器的函數時，您應該在它們之前使用控制器別名。像他們也屬於this控制器的上下文。

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

來源

2016-02-26 22:19:15

謝謝，我意識到我做到了。生病更新我的帖子。但它仍然沒有工作 – noobcoder

AngularJS ng-click在點擊時顯示數值

回答

相關問題