What is the best way to display the remaining items in an array when a user clicks the next button?

Having a total of 12 cameras, I want to be able to select 4 cameras from a drop-down menu option and have only those 4 cameras displayed. Then, when I click on the next button, I need to show the remaining cameras in the selected layout format. How can this functionality be implemented?

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

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

Clicking on the next button should display the next set of cameras from the array based on the selected layout. Can you assist with the code?

javascriptangularjs

Answer №1

To extract specific elements from an array, you can utilize the .slice(start, stop) method within your next_view() function.

For example, the expression .slice(0, 4) would retrieve items at indices 0, 1, 2, and 3, representing the first 4 elements.

To access the next group of items, you can use .slice(4, 8) followed by .slice(8, 12).

This process can be managed efficiently using an index variable.

For initial invocation of next_view(), you can start with:

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

Remember to increment the index by 1 each time you switch to a new set and reset it as needed.

For more details on the slice method, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message from sails.js: `req.target` is not defined

Experiencing a problem where req.target sometimes returns undefined, causing issues with other functionalities dependent on req.target. Seeking assistance to resolve this issue. Appreciate any help! ...

javascriptnode.jssails.js

Encountering a peculiar error while attempting to install firebase-tools

Currently in the process of deploying my application on Firebase by following a tutorial. I encountered an issue after executing the command npm install -g firebase-tools: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" d ...

javascriptreactjsfirebasenpmfirebase-tools

How can you retrieve attributes from a specific element within a dropdown menu?

I came across this intriguing HTML code snippet: <select id="selectSomething"> <option id="4" data-name="tomato" data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbba0a2aebba08fbbe1aca0a2">[email ...

javascriptjqueryhtmlselect

Display the appropriate selection choices based on the knockout condition

In my HTML page, there is a dropdown with certain conditions that determine which options should be rendered in the select element. My attempt at achieving this: <select> <!-- ko if: condition() --> <option value="1">1& ...

javascriptjqueryselectknockout.jsdrop-down-menu

Problems Arise Due to HTA File Cache

My JavaScript function fetches the value of a label element first, which serves as an ID for a database entry. These IDs are then sent to an ASP page to retrieve the save location of images from the database. The save location information for each selecte ...

javascriptajaxinternet-explorercachinghta

Animating elements on a webpage can be achieved by using both

Is there a way to create an animation that moves objects based on button clicks? For example, when the "Monday" button is pressed, the object with the correct color will move down. If any other button like "Tuesday" is clicked, the previous object will mov ...

javascriptcss

What is the best way to transfer information between two components in React.js by simply clicking a button?

One of the challenges I am currently facing involves rendering data from the Pokemon API in a table. Within this table, there is a button that allows users to select specific data when pressed. My goal is to send this selected data from the table component ...

javascriptreactjsmaterial-uireact-props

The most recent version of Angular featuring the powerful Angular-anim

Currently, I am in the process of revamping an application that was initially developed using a combination of jquery, bootstrap, and kendo ui. Moving forward, the application will transition to an angular (2/4) and kendo framework. In the previous setup, ...

angularjsangular

React event handling

Currently, I am in the process of developing an accordion app using React. The data for this app is fetched from an API, and while I have the basic structure of the app ready, I am facing some difficulties with handling the click event on the accordion. H ...

javascriptreactjsaccordion

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

javascriptphphtmlredirectonclick

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...

htmlcssangularjs

The Chrome browser does not recognize Sys.WebForms

I am encountering an issue with my Web-Application when trying to perform partial updates. The error message "Sys.WebForms is undefined in Chrome (latest version)" keeps popping up. Despite my extensive research efforts, I have not been able to find a solu ...

javascriptasp.netajaxwebforms

What is causing the scripts to fail when I attempt to press a button?

Clicking on the button is supposed to slowly reveal phone numbers on the page. Here are the HTML Codes: <span id="show-phone-numbers" class="btn btn-success"> <i class="fe fe-phone-call"></i> Show Phone Nu ...

javascriptjquerybootstrap-5

Guide on implementing a looping settimeout function on a sliding page to dynamically load an HTML template within the Framework 7 framework

My current setup involves using Framework7 (framework7.io). The code below functions correctly on the main view page, utilizing a looping settimeout to refresh signups.html every second: <script type=“text/javascript” src=“code.jquery.com/jquery- ...

javascriptjqueryhtmlhtml-framework-7

Is there a way to submit an object to the server without using ajax during form submission?

I have a web application built on the ASP.NET MVC 5 framework. One of the pages in my application utilizes the amazing jQuery-QueryBuilder plugin, allowing users to create filters to refine the dataset results. When a user submits the form by clicking the ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-5

Using C# within a JavaScript Element on a CSHTML webpage

Is there a way to integrate C# code into a JavaScript statement? Below is an example of the code I am trying to use: document.getElementById('part1').innerHTML = '' + '@Html.Partial("SelectCustomer.Views")' ' Views&apos ...

javascriptc#asp.netrazormodel-view-controller

No Access-Control-Allow-Origin or Parsing Error with jQuery

I am attempting to use ajax from a different server to request data from my own server as a web service. The response is a valid json generated by json_encode. {"reference":"","mobile":"","document":"","appointment":""} To avoid the 'Access Control ...

javascriptphpjqueryajaxjson

Is it possible for the server to initiate communication with the client

Every time I try to find a solution, Comet always comes up. But it seems like overkill for what I need - just around 100 users at most, with maybe 10 online simultaneously. Is there a simpler and more suitable option for my needs, such as pushing data to ...

php.netjavascriptjqueryajax

Backbone "recalling" stored data in attributes

Presented here is a basic model: myTestModel = Backbone.Model.extend({ defaults: { title: 'My Title', config: {}, active: 1, } }) While nothing particularly stands out, there is an interesting observation regardi ...

javascriptbackbone.js

Guide on utilizing Subscribe Observable for performing lookup in Angular

I am new to Angular and seeking guidance as my approach may not be the best. Please advise me on a better solution if you have one. My goal is to display a list of records in table format, retrieved from the database where only Foreign Keys IDs are availa ...

javascriptangular