>source

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

다음 버튼을 클릭하면 레이아웃을 고려하여 배열에서 다음 카메라 세트를 표시해야합니다. 코드를 알려주세요.


  • 답변 # 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에 대한 추가 정보가 있습니다

관련 자료

  • 이전 c - 경고 - 호환되지 않는 포인터 유형에서 'inet_aton'의 인수 2를 전달하는 중… 오류
  • 다음 모든 드롭 다운이 변경되면 CSS를 적용하십시오