Question

我有一个非常大的列表，它是一个名为leagues的数组，我需要允许用户获取该数组（列表）上的元素，并通过单击按钮选择那些作为收藏夹

$scope.favoriteLeagues = [];

$scope.favoriteLeague = function(league) {

  $scope.favoriteLeagues.push(league);

}

所以我想知道我做错了什么？该函数有时允许我添加一个作为收藏，但是一旦我点击第二个，我收到一些未定义的消息，而且，绑定不起作用，我无法看到{{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);

       }

      };

     });

Answer 1

我无法帮助你使用angular.js，我从来没有使用过它，但是你不小心用函数替换了这个数组的事实可能并没有帮助。 ng-repeat试图遍历最喜欢的联赛，但失败了，因为这是一个功能！看看我在你的代码中添加的评论。

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

Answer 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-controller将视图附加到控制器上。

Answer 3

您需要将控制器附加到html以使绑定工作，通常在顶层父元素，例如包含ngrepeat标记的div。

将数组元素添加到另一个数组

3 个答案: