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

【问题标题】：adding array elements to another array将数组元素添加到另一个数组
【发布时间】：2015-02-04 19:54:20
【问题描述】：

我有一个非常大的列表，它是一个名为 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);

       }

      };

     });

【问题讨论】：

您的数组和函数使用相同的名称，您只能有一个，您需要重命名其中一个
@NietzscheProgrammer -- 因为favoriteLeagues 是一个数组！你需要指定一个索引！
我们能有完整的 HTML 上下文吗？就像这些东西在 ng-repeat 中一样吗？您如何显示各种对象？
另外你定义了 $scope.favouriteLeague 但正试图进入 $scope.favouriteLeagues - 注意额外的 's'
我们可以看看你的控制器代码吗？

标签： javascript arrays angularjs

【解决方案1】：

您尚未粘贴完整的 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 将视图附加到控制器。

【讨论】：

【解决方案2】：

我对 angular.js 帮不上什么忙，我从来没有使用过它，但是你不小心用函数替换了数组这一事实可能没有帮助。 ng-repeat 试图循环遍历 favoriteLeagues 但失败了，因为这是一个函数！看看我在你的代码中放入的 cmets。

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

【讨论】：

【解决方案3】：

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

【讨论】：

我在索引视图中有那个。