我正在使用json中的项目集合构建一个库UI。每个项目都有很多东西（选项，文本，附加图像等等的复选框等。在原始图库页面中，如果您点击某个项目，它会打开一个显示所有这些项目的页面。但是，如果用户想看下一个，他/她必须备份并点击下一个。这很不方便。我想实现next / prev功能，以便用户可以直接看到下一个项目详细信息视图。当然还要回到上一页。
为了简单起见，我把它最小化了。我将它放在一个有棱角的材料标签内，这样当你点击标签时就可以看到所需的效果。但是，单击按钮时必须发生这种效果。 标签仅用于模仿视觉辅助功能。原始设计不是基于这些标签构建的。
以下是我的HTML：
<div ng-controller="TempController">
<div>
<md-button class="md-fab md-mini md-primary" ng-click="prevMedia()">
<i class="fa fa-chevron-left"></i>
</md-button>
<md-button class="md-fab md-mini md-primary" ng-click="nextMedia()">
<i class="fa fa-chevron-right"></i>
</md-button>
</div>
<div>
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<div ng-repeat="data in data.data">
<md-tab label="{{data.id}}">
<md-content class="md-padding">
<md-checkbox ng-repeat="eachTag in data.tags">
{{eachTag}}
</md-checkbox>
<p>{{data.text}}</p>
</md-content>
</md-tab>
</div>
</md-tabs>
</md-content>
</div>
</div>
控制器的缩短版本：
.controller('TempController', function($scope) {
$scope.data = {
"data": [{
"id": 1,
"tags": [
"tag1",
"tag2"
],
"text":"Something here"
}, {
"id": 2,
"tags": [
"tag1",
"tag2",
"tag3",
"tag4"
],
"text":"Something else here"
},{
"id": 3,
"tags": [
"tag1",
"tag2",
"tag3"
],
"text":"Something else again here"
}]
}
function nextMedia(){
data.data++;
}
function prevMedia(){
data.data--;
}
}）;
这是CODEPEN给你的
如果有帮助，这里是真正的控制器：
(function ()
{
'use strict';
angular
.module('app.scala-media')
.controller('MediaController', MediaController);
/** @ngInject */
function MediaController($scope, $document, $state, MediaService, Media)
{
var vm = this;
// Data
vm.taToolbar = [
['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'bold', 'italics', 'underline']
];
vm.media = Media;
vm.categoriesSelectFilter = '';
vm.ngFlowOptions = {
};
vm.ngFlow = {
// ng-flow will be injected into here through its directive
flow: {}
};
vm.dropping = false;
vm.imageZoomOptions = {};
// Methods
vm.saveMedia = saveMedia;
vm.nextMedia = nextMedia;
vm.prevMedia = prevMedia;
vm.gotoMedias = gotoMedias;
vm.onCategoriesSelectorOpen = onCategoriesSelectorOpen;
vm.onCategoriesSelectorClose = onCategoriesSelectorClose;
vm.fileAdded = fileAdded;
vm.upload = upload;
vm.fileSuccess = fileSuccess;
vm.isFormValid = isFormValid;
vm.updateImageZoomOptions = updateImageZoomOptions;
/////////
init();
/**
* Initialize
*/
function init()
{
if ( vm.media.images.length > 0 )
{
vm.updateImageZoomOptions(vm.media.images[0].url);
}
}
/**
* Save media
*/
function saveMedia()
{
if ( vm.media.id )
{
MediaService.updateMedia(vm.media.id, vm.media);
}
else
{
MediaService.createMedia(vm.media);
}
}
/**
* Next Media - not working
*/
function nextMedia()
{
vm.media++;
}
/**
* Previous Media - not working
*/
function prevMedia()
{
vm.media--;
}
/**
* Go to medias page
*/
function gotoMedias()
{
$state.go('app.scala-media.medias');
}
/**
* On categories selector open
*/
function onCategoriesSelectorOpen()
{
$document.find('md-select-header input[type="search"]').on('keydown', function (e)
{
e.stopPropagation();
});
}
/**
* On categories selector close
*/
function onCategoriesSelectorClose()
{
// Clear the filter
vm.categoriesSelectFilter = '';
// Unbind the input event
$document.find('md-select-header input[type="search"]').unbind('keydown');
}
/**
* File added callback
* Triggers when files added to the uploader
*
* @param file
*/
function fileAdded(file)
{
// Prepare the temp file data for media list
var uploadingFile = {
id : file.uniqueIdentifier,
file: file,
type: 'uploading'
};
// Append it to the media list
vm.media.images.unshift(uploadingFile);
}
/**
* Upload
* Automatically triggers when files added to the uploader
*/
function upload()
{
// Set headers
vm.ngFlow.flow.opts.headers = {
'X-Requested-With': 'XMLHttpRequest',
//'X-XSRF-TOKEN' : $cookies.get('XSRF-TOKEN')
};
vm.ngFlow.flow.upload();
}
/**
*
* @param file
* @param message
*/
function fileSuccess(file, message)
{
angular.forEach(vm.media.images, function (media, index)
{
if ( media.id === file.uniqueIdentifier )
{
var fileReader = new FileReader();
fileReader.readAsDataURL(media.file.file);
fileReader.onload = function (event)
{
media.url = event.target.result;
};
// Update the image type so the overlay can go away
media.type = 'image';
}
});
}
/**
* Checks if the given form valid
*
* @param formName
*/
function isFormValid(formName)
{
if ( $scope[formName] && $scope[formName].$valid )
{
return $scope[formName].$valid;
}
}
/**
* Update image zoom options
*
* @param url
*/
function updateImageZoomOptions(url)
{
vm.imageZoomOptions = {
images: [
{
thumb : url,
medium: url,
large : url
}
]
};
}
}
})();
这就是json的实际情况：
{
"data": [
{
"id": 1,
"name": "HTML5 Script",
"path": "/museum/html5_script.js",
"description": "Officia amet eiusmod eu sunt tempor voluptate laboris velit nisi amet enim proident et. Consequat laborum non eiusmod cillum eu exercitation. Qui adipisicing est fugiat eiusmod esse. Sint aliqua cupidatat pariatur mollit ad est proident reprehenderit. Eiusmod adipisicing laborum incididunt sit aliqua ullamco.",
"volume":250,
"categories": [
"Museum",
"Scripts"
],
"tags": [
"video",
"short play"
],
"images": [
{
"default": true,
"id": 1,
"url": "assets/images/media/html5.png",
"type": "image"
}
],
"approvalicon":"ti-na",
"approvalmsg":"Not Approved",
"typeicon":"ti-html5",
"detailType":"156.7 MB",
"detailDimensions":"1366 x 1920",
"detailDuration":"",
"detailFolder":"Museum",
"modifiedDate":"2016-2-10 16:19:22",
"modifiedRevision":"1",
"modifiedUsed":"1 time",
"modifiedWhere":"#",
"priceTaxExcl": 9.309,
"priceTaxIncl": 10.24,
"taxRate": 10,
"comparedPrice": 19.90,
"quantity": 3,
"sku": "A445BV",
"width": "22cm",
"height": "24cm",
"depth": "15cm",
"weight": "3kg",
"extraShippingFee": 3.00,
"active": true
},
{
"id": 2,
"name": "Leopard Family",
"path": "/playlists/leopard_fam.jpeg",
"description": "Duis anim est non exercitation consequat. Ullamco ut ipsum dolore est elit est ea elit ad fugiat exercitation. Adipisicing eu ad sit culpa sint. Minim irure Lorem eiusmod minim nisi sit est consectetur.",
"volume":250,
"categories": [
"Video",
"Playlist",
"Animals"
],
"tags": [
"video",
"long play"
],
"images": [
{
"default": true,
"id": 1,
"url": "assets/images/media/leopard.jpeg",
"type": "image"
},
{
"default": false,
"id": 2,
"url": "assets/images/media/leopard.jpeg",
"type": "image"
},
{
"default": false,
"id": 3,
"url": "assets/images/media/leopard.jpeg",
"type": "image"
}
],
"approvalicon":"ti-na",
"approvalmsg":"Not Approved",
"typeicon":"ti-control-play",
"detailType":"100 MB",
"detailDimensions":"2730 x 3836",
"detailDuration":"0:01:09.76",
"detailFolder":"",
"modifiedDate":"2016-5-5 16:19:22",
"modifiedRevision":"1",
"modifiedUsed":"1 time",
"modifiedWhere":"#",
"priceTaxExcl": 22.381,
"priceTaxIncl": 24.62,
"taxRate": 10,
"comparedPrice": 29.90,
"quantity": 92,
"sku": "A445BV",
"width": "22cm",
"height": "24cm",
"depth": "15cm",
"weight": "3kg",
"extraShippingFee": 3.00,
"active": true
},
... About a hundred of these...
]
}
提前感谢您的帮助
答案 0 :(得分：1)
使数据数组的索引成为可以更新的范围变量。
这是一个codepen： http://codepen.io/o4ohel/pen/PWvJOP
<强> HTML
<md-content class="md-padding">
<md-checkbox ng-repeat="eachTag in data.data[current].tags">
{{eachTag}}
</md-checkbox>
<p>{{data.data[current].text}} </p>
</md-content>
<强> JS
...
$scope.current = 0;
$scope.nextMedia = nextMedia;
$scope.prevMedia = prevMedia;
...
function nextMedia() {
$scope.current = ($scope.current === $scope.data.data.length - 1) ? 0 : $scope.current + 1;
}
function prevMedia() {
$scope.current = $scope.current === 0 ? $scope.data.data.length - 1 : $scope.current -1;
}