創建角度next和prev函數

Question

我正在用json中的項目集合構建一個畫廊UI。每個項目都有很多東西（複選框用於選項，文本，輔助圖像等等等等）。當在原始圖庫頁面中時，如果您單擊某個項目，則會打開一個顯示所有這些項目的頁面。但是，如果用戶想看下一個，他/她必須備份並點擊下一個，這很不方便，我想實現下一個/ 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> 

控制器的縮短的版本：

​​

}）;

這裏是你

一個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

使數據數組的索引一個可以更新的範圍變量。

這裏有一個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; 
}