Displaying items in pairs in AngularJS with ng-repeat

Question

Displaying items in pairs in AngularJS with ng-repeat

The design I want to achieve is as follows:

<div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
    </div>
</div>

While this code generates the divs, I'm struggling with adding separators between each pair of items. I believe Angular should provide a simple solution for this.

<div>
    <div class="row">
        <div ng-repeat="object in objects"></div>
    </div>
</div>

javascript angularjs

Answer 1

Answer №1

If you're looking to tackle this challenge, consider leveraging a touch of javascript alongside ng-repeat as shown below:

<div>
    <div class="row" ng-repeat="array in obj2">
        <div ng-repeat="object in array">{{object}}</div>
    </div>
</div>

Next step is to establish a new object named obj2 within your angular controller using the objects array as demonstrated here:

$scope.obj2 = [];
while ($scope.objects.length) {
    $scope.obj2.push($scope.objects.splice(0, 2))
}

For an interactive demonstration, check out this Fiddle

Answer 2

If you're looking to tackle this challenge, consider leveraging a touch of javascript alongside ng-repeat as shown below:

<div>
    <div class="row" ng-repeat="array in obj2">
        <div ng-repeat="object in array">{{object}}</div>
    </div>
</div>

Next step is to establish a new object named obj2 within your angular controller using the objects array as demonstrated here:

$scope.obj2 = [];
while ($scope.objects.length) {
    $scope.obj2.push($scope.objects.splice(0, 2))
}

For an interactive demonstration, check out this Fiddle

Answer 3

Answer №2

If you understand what you need to accomplish, one way to do it is by utilizing the $index property provided by the ngRepeat directive and then applying a modulo operation on that index like so:

<div ng-repeat="object in objects">
    <div>My Content</div>
    <div data-ng-show="$index % 3 == 0">My Separator</div>
</div>

Answer 4

If you understand what you need to accomplish, one way to do it is by utilizing the $index property provided by the ngRepeat directive and then applying a modulo operation on that index like so:

<div ng-repeat="object in objects">
    <div>My Content</div>
    <div data-ng-show="$index % 3 == 0">My Separator</div>
</div>

Displaying items in pairs in AngularJS with ng-repeat

Answer №1

Answer №2

Similar questions

Configure webpack to source the JavaScript file locally instead of fetching it through HTTP

Unit tests may not properly update the Angular Async pipe

Troubleshooting: Discord bot failing to initialize on Heroku

Preview and enlarge images similar to the way Firefox allows you to do

The dreaded "fatal error: JavaScript heap out of memory" message struck once again while using npx

Just delving into React for the first time and encountering undefined values in PropTypes

Ways to manage properties that are non-existent

Exploring the concept of front-end deletion through ajax technology

Showcase -solely one property object- from numerous property objects enclosed within an array

The child_process module in Typescript is unable to recognize execSync as a valid function and returns

High RAM consumption with the jQuery Vegas plugin

A comprehensive guide to utilizing the GROUP BY YEAR(created_at) function in sequelize

Use jQuery's .replaceWith method only once for each instance

AngularJS employs the identical service as the model but with distinct data

Get the latest html content and save it as a .html file using javascript or jQuery

Significant issue identified with ajax functionality, requiring immediate attention

Obtain JSX content from a React Component that has been imported

Alter the class of the div element every three seconds

Is it possible to utilize jQuery to insert a chosen form into a table?

Choose the span element within every other td that is not enclosed by an anchor tag