Adding Array Elements To Another Array

I have a very big list which is an array named leagues, I need to allow the user to take the elements on that array(list) , and choose those as favorites by clicking a button $scop

Solution 1:

You haven't pasted the full html, but it should look something like this:

<!-- Use ng-app to auto-bootstrap an AngularJS application--><!-- Use ng-controller to attach your view with your SportsController  controller --><ion-list><div><strong>Favorites</strong><!-- Looping through all the favourite leagues--><divng-repeat="favouriteL in favoriteLeagues">
            {{favouriteL.name}}        
        </div></div><!-- Looping through all the sports --><divng-repeat="sport in sportsFilter = (sports | filter:query)"><!-- Bind the sport name --><strong>{{sport.name}}</strong><!-- Looping through all the leagues --><ion-itemng-repeat="league in sport.leagues"><!-- Display a button which on tap will call favoriteLeague function --><ion-option-buttonclass="button-light icon ion-star"on-tap="favoriteLeague(league)"></ion-option-button><!-- Bind the name of the league --><div>{{league.name}}</div></ion-item></div></ion-list>

Don't forget to attach the view with your controller using ng-controller.

Solution 2:

I can't help you much with angular.js, I've never used it, but the fact that you are accidentally replacing the array with the function probably doesn't help. ng-repeat is trying to loop through favoriteLeagues but fails because that's a function! Look at the comments I put in your code.

$scope.favoriteLeague = []; // creates an array$scope.favoriteLeague = function(league) { // replaces the array with a function!!!$scope.favoriteLeagues.push(league); // suddenly leagues takes an S ?

}

To avoid this type of error, you should respect a naming convention for your functions. I like to use action words and verbs for functions. I only use plural forms on arrays and related functions. Here's what I'd do in your case:

$scope.favoriteLeagues = [];

$scope.addToFavoriteLeagues = function(league) {
  $scope.favoriteLeagues.push(league);
}

Solution 3:

You need to attach your controller to the html in order for the bind to work, usually at the top level parent element, e.g a div, containing the ngrepeat markup.