adding array elements to another array

Question

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

$scope.favoriteLeagues = [];
$scope.favoriteLeague = function(league) {
 $scope.favoriteLeagues.push(league);
}

so I want to know what am I doing wrong ? the function sometimes allows me to add one as favorite, but once I click on the second one, I got a message of something undefined, and also, the binding is not working, I am unable to see the {{favoriteLeagues.name}} printed.

UPDATED AS REQUESTED

<div>
 <strong>Favorites</strong>
 {{favoriteLeagues.name}}
 </div>
 <ion-option-button class="button-light icon ion-star"
 on-tap="favoriteLeague(league)">
 </ion-option-button>
 <div ng-repeat="sport in sportsFilter = (sports | filter:query)">
 <strong>{{sport.name}}</strong>
 </div>
 <ion-item ng-repeat="league in sport.leagues">
 <div>{{league.name}}</div>
 </ion-item>
 </ion-list>

here the controller:

 .controller('SportsController', function($scope, $state,
 AuthFactory, SportsFactory) {
 $scope.favoriteLeagues = [];
 $scope.sports = [];
 AuthFactory.getCustomer().then(function(customer) {
 $scope.customer = customer;
 SportsFactory.getSportsWithLeagues(customer).then(function(sports) {
 if (sports.length) {
 $scope.sports = sports;
 }
 $scope.isSportShown = function(sport) {
 return $scope.shownSport === sport;
 };
 $scope.favoriteLeague = function(league) {
 $scope.favoriteLeagues.push(league);
 }
 };
 });

• Patrick Evans: You are using the same name for your array and function, you can only have one, you need to rename one of them
• tymeJV: @NietzscheProgrammer -- Because favoriteLeagues is an array! You need to specify an index!
• ryanyuyu: Can we have the full HTML context? Like is this stuff inside an ng-repeat? How are you displaying the various objects?
• mindparse: Also you defined $scope.favouriteLeague but are trying to push into $scope.favouriteLeagues - notice the extra 's'
• mindparse: Can we see your controller code?

Answer 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.

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

Answer 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.

• Non: I have that in the index view bro.