Ensure that a div is both opened and closed after every specified "x" element

If you have 8 items in an array and want to display them with 3 items per page, resulting in a total of 3 pages, there is a simple logic involved. However, using ng-repeat to achieve this may not be straightforward. If there isn't a direct method, alternative approaches can be explored.

Essentially, the goal is to split the array into groups of 3 items each:

JS

$scope.items = ["A", "B", "C", "D", "E", "F", "G", "H"];
$scope.pages = Math.ceil($scope.items.length/3);

HTML

<div class="box">
    <div class="items" ng-repeat="page in pages">
        <!-- place 3 items here before moving onto the next group -->
    </div>
</div>

Expected Output

<div class="box">
    <div class="items">
        <p>A</p>
        <p>B</p>
        <p>C</p>
    </div>
    <div class="items">
        <p>D</p>
        <p>E</p>
        <p>F</p>
    </div>
    <div class="items">
        <p>G</p>
        <p>H</p>        
    </div>
</div>

Answer №1

To reach your objective, consider breaking down your main array into smaller arrays using the splicing function for arrays: https://www.w3schools.com/jsref/jsref_splice.asp

Here is an example of how your splitting function could be implemented:

var _split = function(res,arr, n) {

  while (arr.length) {
    res.push(arr.splice(0, n));
  }

}

I've provided a jsfiddle link to demonstrate this with your specific requirements: http://jsfiddle.net/ADukg/11761/

Answer №2

Here is a suggestion for your angular controller code:

$scope.items = ["A", "B", "C", "D", "E", "F", "G", "H"];
$scope.pages = Math.ceil($scope.items.length/3);
$scope.itemsArray=[];
while($scope.items.length>0){
        $scope.itemsArray.push($scope.items.splice(0,$scope.pages));
}

In the HTML file, you can use the following:

<div ng-repeat="o in itemsArray">
<p ng-repeat="it in o"> {{it}} </p>
</div>`

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

Why isn't my computed property functioning properly in Vue.js?

Exploring the code snippet provided below: new Vue({ el: '#app', computed: { myMessage: function() { return "hello"; } }, data: { message: this.myMessage }, mounted: function() { console.log(this.myMessage); ...

Display two separate views or templates on the screen using AngularJS

Currently, I am developing a mobile app powered by Angular and I am looking to create a unique view that displays halves of two separate views. The user should be able to switch between the two views by swiping up or down. Can anyone provide advice on how ...

How to Accurately Obtain Serial Numbers in Add, Remove, and Clone Operations Using My Calculation Method

How To Properly Calculate SrNo in the Add, Remove, and Clone Functions By clicking "Add" multiple times, deleting rows, and then adding again, the SrNo becomes incorrect. I want it to calculate properly with my custom function... <div id="button_pro" ...

Using jQuery and AJAX to fetch the return value of a PHP class method

Starting a new project for myself has been quite the learning experience. As someone who isn't the most skilled programmer, I decided to kick things off in PHP. However, I quickly realized that executing PHP functions and class methods through HTML bu ...

Extract the element when the mouse is clicked

I'm currently working on developing a Chrome extension with a specific goal in mind: My aim is to capture the username when a user Ctrl-clicks on a username while browsing Reddit, and then transfer that username from the content script page to the ba ...

Tips for deactivating trackball rotation events and triggering a custom rotation event while adjusting the rotation speed within the custom event

In an attempt to disable the trackball control rotate event and trigger a custom rotate event, I have encountered some challenges. While setting controls.enableRotate = false; works for OrbitControl, it does not completely disable the trackball control r ...

Struggling with css margins and div image constraints, seeking guidance and tips for resolution

Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...

Using jQuery Flot to set a target value and visually indicate its position on the graph

I'm currently using the jquery flot plugin to create graphs. My goal is to mark a specific value on the graph by plotting a horizontal line and displaying its exact value. I have already used markings to draw the line, but I am struggling to figure ou ...

Obtain the data from the hyperlink destination

Having some trouble extracting a value from an href link to use in my database operations. Unfortunately, I couldn't retrieve the desired value. Displayed below is the code for a button: <a class="btn btn-info" href="scheduleSetTime.php?id=&apo ...

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

modifying the source of an Ajax POST request

Is it possible to modify the referrer in an HTTP Ajax call using jQuery or JavaScript? I'm looking to send a request from my page but have the referrer appear as though it came from another page. Any insights would be appreciated. ...

Hide dropdown when clicked outside of it

Can someone help me modify my JavaScript code so that when I click on a new dropdown, it closes the previous one and keeps only the current one open? function manageDropdowns() { var dropdowns = document.querySelectorAll('.dropdown:not(.is-hove ...

AngularJS encountered an error with email validation due to having exactly 4 characters after the "@" symbol

I have encountered a basic issue with Angular regarding email address validation using ng-pattern. Despite trying to implement it, I am facing difficulties in certain conditions. Please refer to the working Demo for more clarity. The issue arises when I i ...

Multiple requests were made by Ajax

I am facing an issue with my ajax code where it is being called multiple times. Below is my php code: (While loop extracts results from a database. For brevity, I have included just the modal and dropdown menu sections.) $rezPet = mysqli_query($kon, "SEL ...

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

What is the best way to send a JSON response from a Symfony2 controller?

I am utilizing jQuery to modify my form, which is created using Symfony. The form is displayed within a jQuery dialog and then submitted. Data is successfully stored in the database. However, I am unsure if I need to send some JSON back to jQuery. I am ...

I'm having trouble locating the corresponding end tag for "<%". How can I resolve this issue?

Here lies the issue: <% for(let i = 0; i < <%= elements %>.length; i++){ %> <li><%= elements[i] %></li> <%}%> ...

Is there a way to implement a method on AirDatepicker within my custom JavaScript file?

I am currently working with AirDatepicker v3.3.5 in my app.js file: window.dateRangePicker = new AirDatepicker('.date-range', { range: true, maxDate: new Date(), multipleDatesSeparator: ' - ' }); After referring to the docu ...

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

Tips on showcasing a JSON object containing two arrays in HTML using a pair of for loops

I am facing an issue with displaying data from two tables in my PHP script. The personal information is being displayed correctly, but the books related to each person are not showing up. I suspect that my approach might not be efficient enough for handlin ...