javascript - 单击下一个按钮时如何显示数组中剩余的项目集？

问题描述

我总共有 12 个摄像头，当我从下拉框中选择 4 个摄像头选项时，它只显示 4 个摄像头。现在，当我单击下一个按钮时，我需要以选定的布局格式显示剩余的摄像机。它将如何运作？

<button class="butn" ng-click="previous_view()">Previous</button>
    <button class="butn" id="next_button" ng-click="next_view()">Next</button>
    <label class="head">Layout :</label>
    <select class="layout_lst" ng-model="size" ng-change="setSize()">
        <option ng-repeat="priority in sizeLst" value="{{priority.type}}">{{priority.name}} />
    </select>
    <div layout-wrap flex-wrap>
        <iframe ng-repeat="item in camerasList | limitTo : size" ng-class="size" oncontextmenu="ShowContextMenu()" src={{item.url}} width="337" height="177" allow=loop />
    </div>
</button>

//js代码

 $scope.sizeLst = [
 {
     "name": "2x2",
     "type": "fourscreen"
 }, {
      "name": "3x2",
      "type": "sixscreen"
 }, {
      "name": "4x2",
      "type": "eightscreen"
 }, {
      "name": "3x3",
      "type": "ninescreen"
 }, {
      "name": "3x4",
      "type": "twelvescreen"
 }
 ];

 $scope.camerasList = [
 {
     "name": "camera 1",
     "url": "assets/Nature Beautiful short video 720p HD.mp4",
     "type": "2screen"
  }, {
     "name": "camera 2",
     "url": "assets/videoplayback.mp4",
     "type": "2screen"
   }, {
      "name": "camera 3",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "4screen"
   }, {
      "name": "camera 4",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "4screen"
   }, {
      "name": "camera 5",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "6screen",
   }, {
      "name": "camera 6",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "6screen"
   }, {
      "name": "camera 7",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "8screen"
   }, {
      "name": "camera 8",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "8screen"
   }, {
      "name": "camera 9",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "8screen"
   }, {
      "name": "camera 10",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "8screen"
   }, {
      "name": "camera 11",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "8screen"
   }, {
      "name": "camera 12",
      "url": "assets/Nature Beautiful short video 720p HD.mp4",
      "type": "8screen"
   }


    let videoLst = $scope.camerasList;
    console.log(videoLst);

    $scope.setSize = () => {
        // if ($scope.size == "1x2") {
        //     $scope.camerasList = videoLst.slice(0, 2);
        //     console.log($scope.camerasList)
        // }
        if ($scope.size === "fourscreen") {
            $scope.camerasList = videoLst.slice(0, 4);
            console.log($scope.camerasList)
        }
        if ($scope.size === "sixscreen") {
            $scope.camerasList = videoLst.slice(0, 6);
            console.log($scope.camerasList)
        }
        if ($scope.size === "eightscreen") {
            $scope.camerasList = videoLst.slice(0, 8);
            console.log($scope.camerasList)
        }
        if ($scope.size === "ninescreen") {
            $scope.camerasList = videoLst.slice(0, 9);
            console.log($scope.camerasList)
        }
        if ($scope.size === "twelvescreen") {
            $scope.camerasList = videoLst.slice(0, 12);
            console.log($scope.camerasList)
        }
    }

单击下一个按钮时，我需要根据布局显示阵列中的下一组摄像机。请给我代码。

标签： javascriptangularjs

你可以.slice(start, stop)在你的next_view()

当您显示前 4 个.slice(0, 4)时，您将获得索引 0、1、2、3（前 4 个项目）

如果您想获得下一组，那么您将这样.slice(4, 8)做.slice(8, 12)

您可以使用索引来执行此操作。

第一次点击next_view()

 index = 1;
 totalShow = 4;
 start = totalShow * index;
 end = start + totalShow
 .slice(start, end)

然后每次进入下一组时将索引增加 1，并在更改视图时将其重置。

javascript - 单击下一个按钮时如何显示数组中剩余的项目集？

问题描述

解决方案

推荐阅读