AngularJS register ng-click event

lukin · 08-06-2015 4:44pm #1

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.

NoelOC · 08-06-2015 8:08pm

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");
        }

lukin · 08-06-2015 8:56pm

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

lukin · 09-06-2015 12:30pm

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"    
      }
      ]

}

AngularJS register ng-click event

Comments