创建角next和prev函数

Question

我正在构建一个包含json中的项目集合的图库UI。每个项目都有大量的内容(选项、文本、图像等的复选框等等)。当您在原始图片库页面中单击某个项目时，它会打开一个显示所有这些项目的页面。但是，如果用户希望看到下一个，他/她必须备份并单击下一个。太不方便了。我想实现一个next/prev特性，这样用户就可以从details视图中看到下一个项目。当然，也回到了以前的水平。

为了简单起见，我已经把它最小化了很多。我把它放在一个有角的材料标签里，这样当你点击标签的时候，你就能看到想要的效果。但是，当单击按钮时，必须发生这种效果。选项卡只用于模仿视觉辅助的功能。最初的设计不是构建在这些选项卡上的。

下面是我的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...

      ]
    }

提前感谢您的帮助

Answer 1

使数据数组的索引成为可以更新的范围变量。

这里有一个代码库：http://codepen.io/o4ohel/pen/PWvJOP

<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;
}