如何使用$ stateParams和ui-router从单击的ng-repeat项中提取数据(JSON)，以加载新的，特定于项的页面? [英] How can I pull data (JSON) from a clicked ng-repeat item to load a new, item specific page using $stateParams and ui-router?

问题描述

这个问题与我要问的相似，并且我已经实现了其中的一些代码.我改用UI-Router，但是我的主要问题是$ http请求并将数据从服务传递到控制器.基本上，我想在上一页单击的相册中的album.html上显示详细信息.

This question is similar to what I am asking and I have already implemented some of the code from that. I'm using UI-Router instead, but my main issue is with the $http request and passing the data from the service to the controller. Basically I want to display the details on the album.html from the album clicked on the previous page.

我真的只需要服务和控制器方面的帮助. HTML就在那里供参考/上下文.

I really just need help with the service and the controller. The HTML is just there for reference/context.

很抱歉，如果这很难理解.如果需要澄清，请发表评论.

Sorry if this is hard to understand. Please comment if you need clarification.

此处是指向以下内容的链接GitHub

Here is a link to the GitHub

<main class="album-view container narrow">
<section class="clearfix">
    <div class="column half">
        <img ng-src="{{album.albumArtUrl}}" class="album-cover-art">
    </div>
    <div class="album-view-details column half">
        <h2 class="album-view-title">{{album.name}}</h2>
        <h3 class="album-view-artist">{{album.artist}}</h3>
        <h5 class="album-view-release-info">{{album.year}} | {{album.label}}</h5>
    </div>
</section>
<table class="album-view-song-list">
    <tr class="album-view-song-item" ng-repeat="song in album.songs">
        <td class="song-item-number" data-song-number="{{$index + 1}}">{{$index + 1}}</td>
        <td class="song-item-title">{{song.name}}</td>
        <td class="song-item-duration">{{song.length}}</td>
    </tr>
</table>

var blocJams = angular.module("blocJams", ["ui.router"]);

blocJams.config(function($stateProvider, $locationProvider){
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
$stateProvider
    .state('album', {
        url: '/album/:albumId',
        controller: 'AlbumController',
        templateUrl: '../templates/album.html'
    });
});

相册服务(http get json)

.service("albumsService", ["$http", function ($http) {
    var model = this;

    model.collection = $http.get("/data/albums.json");

    model.getCollection = function() {
        return model.collection;
    };

    model.getAlbumAt = function(_id) {
        model.getCollection();
        return filterFilter(model.collection, {
            id: _id
        })[0];
    }; 
}])

相册控制器

.controller('AlbumController', ["$scope", "albumsService", "$stateParams", function ($scope, albumsService, $stateParams) {

    albumsService.collection.then(function (albums) {
        //$scope.album = albumsService.getAlbumAt($stateParams.albumId);
        $scope.album = albums.data[0];
    });
}]);

推荐答案

只想让大家知道我已经解决了这个问题.事实证明，通过URL访问stateparams页面时，文件路径存在问题.他们必须是绝对的，而不是相对的.我还更新了以下一些代码以反映最终产品.让我知道是否有任何疑问！

Just wanted to let everyone know that I've solved the problem. Turned out to be an issue with the file paths when accessing the stateparams page via URL. They needed to be absolute as opposed to relative. I've also updated some of the code below to reflect the final product. Let me know if there are any questions!

APP CONFIG

var blocJams = angular.module("blocJams", ["ui.router", "services"]);

blocJams.config(function($stateProvider, $locationProvider){
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
$stateProvider
    .state('album', {
        url: "/album/:id",
        controller: "AlbumController",
        templateUrl: "../templates/album.html"
    });
});

相册服务

.service("albumsService", ["$http", function ($http) {
    "use strict";

    var albumsService = this, i;

    albumsService.collection = $http.get("/data/albums.json");

    return {

        collection: albumsService.collection,
        getAlbumById: function (data, prop, value) {
            for (i = 0; i < data.length; i++) {
                if (data[i][prop] == value) {
                    return i;
                }
            }
        }
    };

相册控制器

.controller('AlbumController', ["$scope", "$stateParams", "albumsService", function ($scope, $stateParams, albumsService) {
        "use strict";

        albumsService.collection.then(function (albums) {
            //$scope.album = albumsService.getAlbumAt($stateParams.albumId);
            //$scope.album = albums.data[$stateParams.id];
            $scope.collection = albums.data;
            console.log($scope.album);
            $scope.album = albums.data[albumsService.getAlbumById($scope.collection, "aid", $stateParams.id)];
        });
}]);

示例JSON

{
"aid": "picasso",
"name": "The Colors",
"artist": "Pablo Picasso",
"label": "Cubism",
"year": "1881",
"albumArtUrl": "/assets/images/album_covers/01.png",
"songs": [
  { "name": "Blue", "length": "4:26", "audioUrl": "assets/music/blue" },
  { "name": "Green", "length": "3:14", "audioUrl": "assets/music/green" },
  { "name": "Red", "length": "5:01", "audioUrl": "assets/music/red" },
  { "name": "Pink", "length": "3:21", "audioUrl": "assets/music/pink"},
  { "name": "Magenta", "length": "2:15", "audioUrl": "assets/music/magenta"}
]
  }

这篇关于如何使用$ stateParams和ui-router从单击的ng-repeat项中提取数据(JSON)，以加载新的，特定于项的页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！