Question

大家好：）

我有一个数组lesMusiques，当我点击一个音乐时，我希望有关于这个的信息。例如，如果我选择了第一个，我必须有数组：{“id”：“30”，“image”：“/ img / panda-desiigner-jpg.jpg”，“artiste”：“Desiigner”， “titre”：“熊猫”，“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.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'的undefined！为什么？

现在我的代码是：

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

MusicCtrl：

.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

我认为您应该在go服务上使用$state方法并在您的州中定义参数。

$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 width ionic中传递一个数组

1 个答案: