Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

AngularJS register ng-click event

Options
  • 08-06-2015 5:44pm
    #1
    lukin
    Registered Users Posts: 3,969 ✭✭✭


    I am getting the following error:
    TypeError: albumFactory.changeSorting is not a function
    I have the HTML below and I want to sort the album list when the button is clicked 
    <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>

</script>
<title>
</title>
	
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
	<!-- <ul data-ng-repeat="album in albums| orderBy:'title'"> -->
	<ul data-ng-repeat="album in albums">
    <li>
      Artist is "{{album.artist}}" and title is "{{album.title}}"

    </li>
  </ul>  
<button data-ng-click="changeSorting()">Description</button>
</div>

</body>
</html>

    My JSON file is the following: 
    {
	"albums":[	  
	  {
	  "artist": "Arctic Monkeys",
	  "title": "AM"
	   },
	   {
	  "artist": "Nirvana",
	  "title": "Nevermind"
	   },
	   {
	  "artist": "Buck 65",
	  "title": "Man Overboard"	  
	  }
	  ]
	  
}

    The app.js file is:
    var albumsApp = angular.module ('albumsApp',[])


albumsApp.factory('albumFactory',function($http) {
return {
	getAlbumsAsync: function(callback,$scope){
		
		$http.get('albums.json').success(callback);

		},
	
	};
	
});

albumsApp.controller ('albumController', function ($scope,albumFactory) {
	albumFactory.getAlbumsAsync(function(results){
	console.log('albumController async returned value');
	$scope.albums = results.albums;
		});
	 albumFactory.changeSorting(function(){
	console.log('changeSorting called');
	
	 	});

	});

    I need to do add some code where albumsApp.factory is but I don't know what.


Comments

  • Options
    #2
    NoelOC
    Registered Users Posts: 47 ✭NoelOC


    The ng-click is expecting "changeSorting" to be a function on the $scope of your 'albumController'

    Try something like this:
    $scope.changeSorting= function () {
            console.log("changeSortingled");
        }


  • Options
    #3
    lukin
    Registered Users Posts: 3,969 ✭✭✭lukin


    It's working, I'l post the answer tomorrow


  • Options
    #4
    lukin
    Registered Users Posts: 3,969 ✭✭✭lukin


    Solution is:
    js file 
    
var albumsApp = angular.module ('albumsApp',[])


        albumsApp.factory('albumFactory',function($http) {
        return {
            getAlbumsAsync: function(callback,$scope){

                $http.get('albums.json').success(callback);
                },

            };


        });
        albumsApp.controller ('albumController', function ($scope,albumFactory,$filter) {
            albumFactory.getAlbumsAsync(function(results){
            console.log('albumController async returned value');
            $scope.albums = results.albums;
                });
             var predicate = 'artist';
                var predicate2 = 'title';
            $scope.changeSorting = function (){
        // your logic goes here
        var orderBy = $filter('orderBy');
   $scope.albums = orderBy($scope.albums, predicate);
        console.log('changeSorting called');
    };
     $scope.changeSorting2 = function (){
        // your logic goes here
        var orderBy = $filter('orderBy');
   $scope.albums = orderBy($scope.albums, predicate2);
        console.log('changeSorting called');
    };      

        });
    HTML is: 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>

</script>
<title>
</title>

</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
    <!-- <ul data-ng-repeat="album in albums| orderBy:'title'"> -->
    <ul data-ng-repeat="album in albums">
    <li>
      Artist is "{{album.artist}}" and title is "{{album.title}}"

    </li>
  </ul>  
<button data-ng-click="changeSorting()">Sort by artist</button>
</br>
</br>
<button data-ng-click="changeSorting2()">Sort by album</button>
</div>


</body>
</html>

    JSON is: 
    {
    "albums":[    
      {
      "artist": "Arctic Monkeys",
      "title": "AM"
       },
       {
      "artist": "Nirvana",
      "title": "Nevermind"
       },
       {
      "artist": "Buck 65",
      "title": "Man Overboard"    
      },
      {
      "artist": "Jeff Buckley",
      "title": "Grace"    
      }
      ]

}


Advertisement