我如何滑動視頻，如果我點擊下一個按鈕使用angular.js

Question

我能夠使用「angular.js」在特定的div中嵌入4個視頻。但是，我有這麼多的視頻將近20個。

所以，我想要做的是，點擊「下一步」按鈕應該在同一個div中獲得接下來的4個視頻。我該如何實現？

任何人都可以請幫我在這個問題......

我的html代碼：

<div class="panel-body"> 

       <video width=176 height=99 style=" margin-left: 10px; margin-right: 10px;" 
        ng-repeat="videoSource in videoSources track by $index" autoplay 
        controls ng-src="{{videoSource | trustUrl}}"> 
       </video> 
       <br> <a href="#" ng-click='loadVideos()'>Load videos</a> 
       <br><button type="button">Next</button> 

      </div> 

我的js代碼：

angular.module('Admin', []) 
.controller('Home', function($scope) { 

    $scope.videoSources = []; 

    $scope.loadVideos = function() { 
     $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4'); 
     $scope.videoSources.push('http://54.88.118.248/Video/Customer_Service.mp4'); 
     $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4'); 
     $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4'); 
     $scope.videoSources.push('http://54.88.118.248/Video/Customer_Service.mp4'); 
     $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4'); 
    }; 
}) 
.filter("trustUrl", ['$sce', 
        function($sce) { 
         return function(recordingUrl) { 
         return $sce.trustAsResourceUrl(recordingUrl); 
         }; 
        } 
        ]); 

Answer 1

實際角度的方法是創建一個自定義過濾器，以視頻對結果進行分頁。在該示例中，我創建了一個paginate篩選器，該篩選器需要兩個參數：pageNum和pageSize至slice將輸入數組轉換爲所需的塊，而無需對陣列進行任何預處理。

還添加了必要的next和previous按鈕並隱藏了load videos按鈕。

angular.module('Admin', []) 
 
    .controller('Home', function($scope) { 
 

 
    $scope.pageNum = 0; 
 
    $scope.pageSize = 4; 
 
    $scope.isFirstPage = function() { 
 
     return $scope.pageNum === 0; 
 
    }; 
 
    $scope.isLastPage = function() { 
 
     return $scope.pageNum >= Math.floor($scope.videoSources.length/$scope.pageSize); 
 
    }; 
 
    $scope.prevPage = function() { 
 
     $scope.pageNum--; 
 
    }; 
 
    $scope.nextPage = function() { 
 
     $scope.pageNum++; 
 
    }; 
 

 
    $scope.videoSources = []; 
 
    $scope.loadVideos = function() { 
 
     for (var i = 0; i < 6; i++) { 
 
     $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/boat_149.webm'); 
 
     $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/horse_riding_205.webm'); 
 
     $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/flower_124.webm'); 
 
     } 
 
    }; 
 
    }) 
 
    .filter("trustUrl", ['$sce', 
 
    function($sce) { 
 
     return function(recordingUrl) { 
 
     return $sce.trustAsResourceUrl(recordingUrl); 
 
     }; 
 
    } 
 
    ]) 
 
    .filter('paginate', function() { 
 
    console.log('creating paginate function', arguments); 
 
    return function(inputArray, pageNumber, pageSize) { 
 
     console.log('paginating', arguments); 
 
     pageNumber = pageNumber || 0; 
 
     pageSize = pageSize || 4; 
 
     if (!Array.isArray(inputArray)) return inputArray; 
 
     return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize); 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div class="panel-body" ng-app="Admin" ng-controller="Home"> 
 
    <video width=176 height=99 ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index" autoplay controls ng-src="{{videoSource | trustUrl}}"> 
 
    </video> 
 
    <div ng-show="videoSources.length"> 
 
    <button ng-disabled="isFirstPage()" ng-click="prevPage()">Previous</button> 
 
    <button ng-disabled="isLastPage()" ng-click="nextPage()">Next</button> 
 
    </div> 
 
    <div ng-hide="videoSources.length"> 
 
    <a href="#" ng-click='loadVideos()'>Load videos</a> 
 
    </div> 
 
</div>

而且因爲我覺得自己的代碼多一些玩耍，這裏有一個版本，使一個分頁對象，這樣的功能可以在不同的控制器和指令被重用：

angular.module('Admin', []) 
 
    .controller('Home', function($scope, Pagination) { 
 
    $scope.videoSources = []; 
 
    $scope.pagination = new Pagination(4); 
 

 
    $scope.loadVideos = function() { 
 
     for (var i = 0; i < 6; i++) { 
 
     $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/boat_149.webm'); 
 
     $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/horse_riding_205.webm'); 
 
     $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/flower_124.webm'); 
 
     } 
 
    }; 
 
    }) 
 
    .factory('Pagination', function() { 
 
    \t var Pagination = function(pageSize) { 
 
    \t this.pageSize = pageSize || 4; 
 
     this.pageNum = 0; 
 
     this.sourceLength = 0; 
 
    }; 
 
    Pagination.prototype.isFirstPage = function() { 
 
     return this.pageNum === 0; 
 
    }; 
 
    Pagination.prototype.isLastPage = function(sourceLength) { 
 
     return this.pageNum >= Math.floor((sourceLength || this.sourceLength)/this.pageSize); 
 
    }; 
 
    Pagination.prototype.prevPage = function() { 
 
     this.pageNum--; 
 
    }; 
 
    Pagination.prototype.nextPage = function() { 
 
     this.pageNum++; 
 
    }; 
 
    Pagination.prototype.setPage = function(pageNum) { 
 
    \t this.pageNum = pageNum; 
 
    }; 
 
    Pagination.prototype.setPageSize = function(pageSize) { 
 
    \t this.pageSize = pageSize; 
 
    }; 
 
    Pagination.prototype.setSourceLength = function(sourceLength) { 
 
    \t this.sourceLength = sourceLength; 
 
    } 
 
    Pagination.prototype.getPage = function() { return this.pageNum; }; 
 
    Pagination.prototype.getPageSize = function() { return this.pageSize; }; 
 
    Pagination.prototype.getSourceLength = function() { return this.sourceLength; }; 
 
    return Pagination; 
 
    }) 
 
    .filter("trustUrl", ['$sce', 
 
    function($sce) { 
 
     return function(recordingUrl) { 
 
     return $sce.trustAsResourceUrl(recordingUrl); 
 
     }; 
 
    } 
 
    ]) 
 
    .filter('paginate', function() { 
 
    console.log('creating paginate function', arguments); 
 
    return function(inputArray, pageNumber, pageSize) { 
 
     console.log('paginating', arguments); 
 
     pageNumber = pageNumber || 0; 
 
     pageSize = pageSize || 4; 
 
     if (pageNumber && pageNumber.pageSize) pageSize = pageNumber.pageSize; 
 
     if (pageNumber && pageNumber.pageNum !== undefined) pageNumber = pageNumber.pageNum; 
 
     if (!Array.isArray(inputArray)) return inputArray; 
 
     return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize); 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div class="panel-body" ng-app="Admin" ng-controller="Home"> 
 
    <video width=176 height=99 ng-repeat="videoSource in videoSources | paginate:pagination track by $index" autoplay controls ng-src="{{videoSource | trustUrl}}"> 
 
    </video> 
 
    <div ng-show="videoSources.length"> 
 
    <button ng-disabled="pagination.isFirstPage()" ng-click="pagination.prevPage()">Previous</button> 
 
    <button ng-disabled="pagination.isLastPage(videoSources.length)" ng-click="pagination.nextPage()">Next</button> 
 
    </div> 
 
    <div ng-hide="videoSources.length"> 
 
    <a href="#" ng-click='loadVideos()'>Load videos</a> 
 
    </div> 
 
</div>

的FILT呃現在看起來有點陌生，因爲我想保留使用它作爲paginate:pageNumber:pageSize的選項，但也允許它被用作paginate:paginationObject，並且花了一點兒詭計。但現在，我們的分頁功能被抽離成一個工廠，因此可以重複使用，並保持我們的控制器瘦，那就是角路（TM）：d

編輯：額外paginate過濾解釋：

.filter('paginate', function() { 

一個console.log()呼叫我用來調試，我忘了在這裏

console.log('creating paginate function', arguments); 

爲了能夠接受的參數角過濾器，你必須返回從過濾器功能

return function(inputArray, pageNumber, pageSize) { 

另一個調試console.log()呼叫需要這些參數的函數

 console.log('paginating', arguments); 

我們不能確定的參數進行傳遞的，所以我們提供合理的默認值（在這種情況下，如果pageNumber沒有給出，我們將其設置爲0，如果pageSize沒有給出，我們將其設定爲4）

 pageNumber = pageNumber || 0; 
     pageSize = pageSize || 4; 

因爲我們希望能夠在一個Pagination對象作爲參數，而不是一個頁碼&頁大小通過，我們看到，如果第一個參數是不是偶然含有pageSize和/或pageNum構件的對象，並且如果它是，我們設置了本地pageNumber和pageSize變量到Pagination對象的成員

 if (pageNumber && pageNumber.pageSize) pageSize = pageNumber.pageSize; 
     if (pageNumber && pageNumber.pageNum !== undefined) pageNumber = pageNumber.pageNum; 

的值然後我們檢查以查看是否到所述過濾器（被過濾的值）的第一個參數實際上是一個數組。如果不是，我們只是返回值不變。例如，如果我們在一個Angular模板中有{{ 1 | paginate }}，結果將是1，我們的算法不會中斷。如果它是一個數組，但是，例如{{ [1, 2, 3, 4, 5] | paginate }}（使用默認的paginate參數），它將變爲[1, 2, 3, 4]和{{ [1, 2, 3, 4, 5] | paginate:0:2 }}將變爲[1, 2]。

 if (!Array.isArray(inputArray)) return inputArray; 

然後實際的分頁邏輯（有趣的是如何比代碼的輸入確認部分的方式更小）。我們slice輸入數組開始於索引pageNumber * pageSize並結束於索引(pageNumber + 1) * pageSize（非包含）。考慮頁碼爲0並且從索引0開始並在索引3結束（因此在索引4（= 1 * 4）不包含）結束的第一頁（對於pageSize = 4），頁面2具有頁碼1並且開始在索引4（= 1×4），並在索引7（索引8（= 2 * 4）非包含，等等More information on Array.prototype.slice()

 return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize); 
    }; 
    }); 

Answer 2

沒有滑動效果，你可以做到這一點頁數：

更改加載視頻：

$scope.videoSources.push({url:'video_here'); 

然後，頁面他們：

var page = 1, perpage = 4; 
$.each($scope.videoSources, function(k, v) { 
    v.page = (page++)/perpage; 

現在，我們有網頁，在你的HTML您可以篩選數據：

ng-repeat="video in videoSources | filter: {page: current_page}" 

和下一頁NG點擊：

ng-click="current_page++" 

與上一頁相同。

**重要注意到：因爲我改變了你的數組包含對象，訪問你需要使用video.url在NG-SRC