Question

我能够使用＆＃34; angular.js＆＃34;将4个视频嵌入到特定的div中。但是，我有近20个视频。

所以，我试图做的是点击＆＃34;下一步＆＃34;按钮应该在同一个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

实际的Angular方法是创建自定义过滤器以对结果进行分页。在示例中，我创建了一个paginate过滤器，它将两个参数：pageNum和pageSize slice输入到所需的块中，而不需要任何前置处理所需的数组。

还添加了必要的next和previous按钮并隐藏了load videos按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

因为我想更多地使用代码，这里是一个制作分页对象的版本，因此功能可以在不同的控制器和指令中重用：

＆＃13;

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() {
  	var Pagination = function(pageSize) {
    	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) {
    	this.pageNum = pageNum;
    };
    Pagination.prototype.setPageSize = function(pageSize) {
    	this.pageSize = pageSize;
    };
    Pagination.prototype.setSourceLength = function(sourceLength) {
    	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);
    };
  });

＆＃13;

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

＆＃13;

过滤器现在看起来有点奇怪，因为我想保留选项将其用作paginate:pageNumber:pageSize，但也允许它用作paginate:paginationObject，这需要一点点诡计。但现在，我们的分页功能被抽象到工厂中，因此可以重复使用并保持我们的控制器精益，这就是 Angular Way （TM）：D

修改：额外的paginate过滤器说明：

  .filter('paginate', function() {

我用来调试的console.log()调用我在这里忘记了

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

为了能够接受Angular过滤器中的参数，您必须从过滤器函数返回需要这些参数的函数

    return function(inputArray, pageNumber, pageSize) {

另一个调试console.log()调用

      console.log('paginating', arguments);

我们无法确定参数是否已传入，因此我们提供合理的默认值（在这种情况下，如果未给出pageNumber，我们将其设置为0并且如果没有给出pageSize，我们会将其设置为4）

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

因为我们希望能够传递一个Pagination对象作为参数而不是页码＆amp;页面大小，我们会看到第一个参数是否偶然包含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结束（不包括在内）。想想第一页（对于pageSize = 4），页面编号为0，从索引0开始，在索引3处结束（所以在索引4（= 1 * 4）非包含时结束），第二页页面编号为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-click：

ng-click="current_page++"

与上一页相同。

**重要提示：因为我更改了您的数组以包含对象，要访问您需要在ng-src中使用video.url的视频

如果我使用angular.js单击下一个按钮，如何滑动视频

2 个答案: