如何将数据推送到工厂/服务中的数组(角/离子)

Question

我想创建一个像这样工作的应用程序：https://ionic-songhop.herokuapp.com

如您所见，当我们单击“最爱”按钮时，该项目将存储在工厂中，并且我们可以在另一个页面中调用(最喜欢的页面)。

在我的例子中:我使用服务来存储项目数据，并创建工厂来存储被推送的项。

这是我的代码：(我在服务中存储数据)

.service('dataService',function(){
  var service=this;
    this.playerlist = [
    { name: 'Leonel Messi', ava:"https://i.scdn.co/image/d1f58701179fe768cff26a77a46c56f291343d68" },
    { name: 'Cristiano Ronaldo', ava:"https://i.scdn.co/image/d1f58701179fe768cff26a77a46c56f291343d68" },
    { name: 'Zlatan Ibrahimovic', ava:"https://i.scdn.co/image/d1f58701179fe768cff26a77a46c56f291343d68" },
    { name: 'Wayne Rooney', ava:"https://i.scdn.co/image/d1f58701179fe768cff26a77a46c56f291343d68" },
    { name: 'Michael Carrick', ava:"https://i.scdn.co/image/d1f58701179fe768cff26a77a46c56f291343d68" },
    { name: 'Phil Jones', ava:"https://pbs.twimg.com/profile_images/473469725981155329/E24vfxa3_400x400.jpeg" },
    { name: 'Angel di Maria', ava:"https://i.scdn.co/image/d1f58701179fe768cff26a77a46c56f291343d68" }
    ]; 
})

.factory('User', function() {
    var play = { favorites: []}

    play.addToFavorites = function(song) {
      play.favorites.unshift(song);
    }

    play.removeFromFavorites = function(player, index) {
      play.favorites.splice(index, 1);
    }
    return play;
})

主计长：

.controller('ChooseTabCtrl', function($scope, dataService, User) {
  $scope.dataService=dataService;
  $scope.addToFavorite = function (item) {
      User.favorites.unshift(dataService.playerList.indexOf(), 1);
  }
})

但是，当我单击每个项目上的“最爱”按钮时，列表不会显示在“最喜欢”页面中。在Ionic应用程序中可以这样做吗？

这是我的代码：http://codepen.io/harked/pen/WvJQWp

Answer 1

你的密码里有一些问题.

在控制器中，当player对象实际上是playerlist (全部小写)时，您引用的是playerlist。另外，我假设您希望实际获得播放机的indexOf，因此需要将该行更改为：

User.favorites.unshift(dataService.playerlist.indexOf(item));
// remove the `, 1` otherwise you'll be adding a `1` to the array everytime

在您看来，您需要更改以下内容：

// wrong
ng-click="addToFavorite(item)"

// right 
ng-click="addToFavorite(player)"

接下来，在ListTabCtrl中更改以下内容：

$scope.players=dataService;

// to
$scope.players=dataService.playerlist;

然后在下列情况下：

<ion-item ng-repeat="player in favorites" class="item item-avatar" href="#">
  <img ng-src="{{players[player].ava}}">
  <h2>{{players[player].name}}</h2>
  <p>Back off, man. I'm a scientist.</p>
  <ion-option-button class="button-assertive" ng-click="removePlayer(player, $index)">
  <i class="ion-minus-circled"></i>
  </ion-option-button>
</ion-item>

我已经在jsbin：http://jsbin.com/lukodukacu/edit?html,css,js,output上发布了一个代码的工作示例