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-->
        <div ng-repeat="favouriteL in favoriteLeagues">
            {{favouriteL.name}}        
        </div>
    </div>

    <!-- Looping through all the sports -->            
    <div ng-repeat="sport in sportsFilter = (sports | filter:query)"> 
        <!-- Bind the sport name -->            
        <strong>{{sport.name}}</strong>

        <!-- Looping through all the leagues -->                
        <ion-item ng-repeat="league in sport.leagues">
            <!-- Display a button which on tap will call favoriteLeague function -->                
            <ion-option-button class="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.