如何使用 $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 请求并将数据从服务传递到控制器.基本上，我想在上一页上单击的专辑中显示专辑中的详细信息.
我真的只需要服务和控制器方面的帮助.HTML 仅供参考/上下文.
对不起，如果这很难理解.如果您需要澄清，请发表评论.
这里是指向GitHub
相册 HTML
<section class="clearfix"><div class="列一半"><img ng-src="{{album.albumArtUrl}}" class="album-cover-art"> <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}} |{{专辑.标签}}</h5>
</节><table class="album-view-song-list"><tr class="album-view-song-item" ng-repeat="专辑中的歌曲.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>
应用配置
var blocJams = angular.module("blocJams", ["ui.router"]);blocJams.config(function($stateProvider, $locationProvider){$locationProvider.html5Mode({启用:真，要求基础:假});$stateProvider.state('专辑', {url: '/专辑/:专辑ID',控制器:'相册控制器'，templateUrl: '../templates/album.html'});});专辑服务(http get json)
.service("albumsService", ["$http", function ($http) {var 模型 = 这个；model.collection = $http.get("/data/albums.json");模型.getCollection = 函数(){返回模型.集合；};模型.getAlbumAt = 函数(_id){模型.getCollection();返回过滤器过滤器(模型.集合，{id:_id})[0];};}])相册控制器
.controller('AlbumController', ["$scope", "albumsService", "$stateParams", function ($scope, albumsService, $stateParams) {专辑Service.collection.then(功能(专辑){//$scope.album = albumsService.getAlbumAt($stateParams.albumId);$scope.album = 专辑.data[0];});}]);只是想让大家知道我已经解决了这个问题.原来是通过 URL 访问 stateparams 页面时文件路径的问题.它们需要是绝对的，而不是相对的.我还更新了下面的一些代码以反映最终产品.如果有任何问题，请告诉我！
应用配置
var blocJams = angular.module("blocJams", ["ui.router", "services"]);blocJams.config(function($stateProvider, $locationProvider){$locationProvider.html5Mode({启用:真，要求基础:假});$stateProvider.state('专辑', {url: "/专辑/:id",控制器:专辑控制器"，templateUrl: "../templates/album.html"});});专辑服务
.service("albumsService", ["$http", function ($http) {严格使用"；var专辑服务=这个，我；专辑服务.collection = $http.get("/data/albums.json");返回 {集合:相册Service.collection，getAlbumById:函数(数据，道具，值){for (i = 0; i < data.length; i++) {如果(数据[i][prop] == 值){返回我；}}}};相册控制器
.controller('AlbumController', ["$scope", "$stateParams", "albumsService", function ($scope, $stateParams, albumsService) {严格使用"；专辑Service.collection.then(功能(专辑){//$scope.album = albumsService.getAlbumAt($stateParams.albumId);//$scope.album = albums.data[$stateParams.id];$scope.collection = 专辑.data;console.log($scope.album);$scope.album = albums.data[albumsService.getAlbumById($scope.collection, "aid", $stateParams.id)];});}]);示例 JSON
<代码>{"援助": "毕加索","name": "颜色",艺术家":巴勃罗·毕加索"，"label": "立体主义","年": "1881","albumArtUrl": "/assets/images/album_covers/01.png",歌曲":[{ "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"}]}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.
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.
Here is a link to the GitHub
Album HTML
<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>
App Config
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'
});
});
Album Service (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];
};
}])
Album Controller
.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];
});
}]);
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"
});
});
ALBUM SERVICE
.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;
}
}
}
};
ALBUM CONTROLLER
.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)];
});
}]);
SAMPLE 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屋！
