传递 url 宽度的数组

Question

大家好 :)

我有一个 lesMusiques 数组，当我点击一首音乐时，我想获得关于这首音乐的信息。例如，如果我选择第一个，我必须有数组：{"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"}

但我不知道如何将它作为参数传递到 url 中。我看到了输入数组的每个值之类的东西，但我希望这不是唯一的解决方案..

这是我的代码：

var lesMusiques = [
  {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"},
  {"id":"31", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "4:22"},
  {"id":"32", "image":"/img/Dont-Mind-Kent-Jones.jpg", "artiste":"Kent Jones", "titre":"Don't mind", "duree": "3:31"},
  {"id":"33", "image":"/img/Jain_Cover_Album.jpg", "artiste":"Jain", "titre":"Come", "duree": "32:23"},
  {"id":"34", "image":"/img/Snoop-dogg.jpg", "artiste":"Snoop Dogg", "titre":"This city", "duree": "33:54"},
  {"id":"35", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "34:22"}
];

.controller('HomeCtrl', function($scope, $state){

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */
  $scope.recupId = function(tabMusic){
    $state.go('music', {tabMusic})
  }

// On indique à la vue qu'elle dispose maintenant du tableaux contenant les musiques
  $scope.lesMusiques = lesMusiques;
})

.controller('MusicCtrl', function($scope, $stateParams){
  console.log($stateParams);
})

还有我的 stateProvider :

$stateProvider.state('music',{
  url: '/musiques/:TabMusiques',
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

在我看来 (home.html) :

<ion-list>
        <!-- Chaque item est un lien -->
        <a ui-sref="music" ng-repeat="laMusique in lesMusiques" ng-model="TabMusic" ng-click="recupId(I DON'T KNOW WHAT TO PUT HERE)" class="item item-thumbnail-left">

                <img src="{{laMusique.image}}">
                <h2 class="white">{{laMusique.titre}}</h2>
                <p class="white">{{laMusique.artiste}}</p>
                <p class="padding-vertical white">{{laMusique.duree}}</p>
        </a>
</ion-list>

我希望你们中的一些人能帮助我 :)

编辑：我的主页：

编辑 2： 当我使用 console.log($state.parameters.musiqueChoisi); 时出现错误：无法读取未定义的属性 'musiqueChoisi'！为什么？

现在我的代码是：

$stateProvider.state('music',{
  url: '/musiques',
  parameters: { musiqueChoisi : null },
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

在 HomeCtrl 中：

.controller('HomeCtrl', function($scope, $state){

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */
  $scope.recupId = function(tabMusic){
    $state.go('music', {musiqueChoisi : tabMusic})
  }
})

音乐控制：

.controller('MusicCtrl', function($scope, $stateParams, $state){
  $state.parameters.musiqueChoisi
  console.log($state.parameters.musiqueChoisi);
})

编辑 3：解决方案（感谢 C.Champagne）

所以有我的控制器:

.controller('HomeCtrl', function($scope, $state){

    $scope.recupId = function(tabMusic){
      $state.go('music', {musiqueChoisi : tabMusic})
    }
    $scope.lesMusiques = lesMusiques;
})

.controller('MusicCtrl', function($scope, $stateParams, $state){
    var musique = $state.params.musiqueChoisi
    console.log(musique);

    $scope.musique = musique;
})

StateProvider :

$stateProvider.state('music',{
  url: '/musiques',
  params: { musiqueChoisi : null },
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

在我看来：

ng-click="recupId(laMusique)"

Answer 1

我认为你应该在 $state 服务上使用 go 方法并在你的状态中定义一个参数。

$stateProvider.state('music',{
  url: '/musiques',
  params: {musicData : null},
  templateUrl: 'templates/music.html',
  controller: 'MusicCtrl'
})

你应该这样称呼它:

$state.go('music', {musicData : tabMusic});

看看this answer

编辑

为了回答您的评论，我认为您的ng-click（在您看来）应该是：

ng-click="recupId(laMusique)"

或者按照您的函数名称建议的那样

ng-click="recupId(laMusique.id)"

...但是您必须从您的 ID 中检索您的对象。

而且...哦，我忘了...在视图中检索您的参数：

var musique =  $state.params.musiqueChoisi;

（不要忘记将 $state 设置为控制器的参数。）

两句小话让我看起来老了而且脾气暴躁：

{"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"} 是对象，不是数组。
我喜欢法语（这是我的母语）并且我理解人们打算保留它。尽管如此，我总是用英语编写代码和发表评论，因为我知道我肯定必须与无法理解代码的人共享或传输代码或进行协作。

传递 url 宽度的数组

Pass an array in url width ionic

ionic-framework

ionic-view