Как показать набор оставшихся элементов в массиве при нажатии следующей кнопки?

Question

У меня всего 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)
        }
    }

при нажатии следующей кнопки мне нужно отобразить следующий набор камер из массива в соответствии с макетом.Пожалуйста, мне с кодом.

Answer 1

Вы можете использовать .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 каждый раз, когда переходите к следующему набору, и сбрасывайте его при смене вида.

Вот еще немного информации о срезе https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice