2015-02-04 2 views
0

나는 배열이 leagues 인 매우 큰 목록을 가지고 있는데, 사용자가 그 배열 (목록)의 요소를 가져와 단추를 클릭하여 즐겨 찾기로 선택할 수있게해야합니다.배열 요소를 다른 배열에 추가하기

그래서 내가 뭘 잘못하고 있는지 알고 싶습니까? 이 기능을 사용하면 즐겨 찾기로 추가 할 수 있지만 두 번째를 클릭하면 정의되지 않은 메시지가 표시되고 바인딩이 작동하지 않아 {{favoriteLeagues.name}}이 인쇄되지 않습니다.

여기 컨트롤러

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

을 요청한 때 업데이트 :

.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); 

     } 

     }; 

    }); 
+0

무엇이 문제입니까? – tymeJV

+0

죄송합니다. 내 업데이트를 참조하십시오 – NietzscheProgrammer

+3

배열과 함수에 동일한 이름을 사용하고 있습니다. 하나만 가질 수 있으며 그 중 하나의 이름을 바꿔야합니다. –

답변

2

당신은 전체 HTML을 붙여하지 않은,하지만은 다음과 같이 보일 것입니다 :

<!-- 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> 

는 NG-컨트롤러를 사용하여 컨트롤러와 뷰를 첨부하는 것을 잊지 마십시오을.

2

내가 그것을 사용한 적이, angular.js에 많은 도움이되지 수 있지만, 사실 그 실수로 함수를 배열로 대체하는 것이 도움이되지 않습니다. ng-repeat는 favoriteLeag를 통해 반복하려고하지만 함수이기 때문에 실패합니다! 코드에 입력 한 주석을보십시오.

$scope.favoriteLeague = []; // creates an array 

$scope.favoriteLeague = function(league) { // replaces the array with a function!!! 

    $scope.favoriteLeagues.push(league); // suddenly leagues takes an S ? 

} 

이러한 유형의 오류를 방지하려면 기능에 대한 명명 규칙을 준수해야합니다. 나는 기능 단어와 동사를 기능에 사용하고 싶다. 배열 및 관련 함수에 대해서만 복수형을 사용합니다. 여기에 내가 귀하의 경우 할 거라고 작업은 다음과 같습니다

$scope.favoriteLeagues = []; 

$scope.addToFavoriteLeagues = function(league) { 
    $scope.favoriteLeagues.push(league); 
} 
당신은 ngrepeat 마크 업을 포함, 일반적으로 최상위 레벨의 부모 요소에서 작업에 바인드 위해서는 예를 들어 사업부를 HTML로 컨트롤러를 연결해야
관련 문제