AngularJS: Implement ng-repeat directive to generate two separate HTML containers

Question

AngularJS: Implement ng-repeat directive to generate two separate HTML containers

I have a collection of items and I want to divide them into two separate containers.

Is there a way to achieve this using ng-repeat?

<div>
    <ul>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
    </ul>
</div>
<div>
    <ul>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
        <li>Some item</li>
    </ul>
</div>

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Method 1 : utilize the slice method on the collection

We can utilize the slice method on the collection :

<div ng-app="myApp" ng-controller="DemoCtrl" ng-init="half = numbers.length / 2">
    <div>
        <ul>
            <li ng-repeat="number in numbers.slice(0, half)">{{number}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li ng-repeat="number in numbers.slice(half)">{{number}}</li>
        </ul>
    </div>
</div>

View demo

Method 2 : apply the limitTo built-in filter

<div ng-app="myApp" ng-controller="DemoCtrl" ng-init="len = numbers.length">
    <div>
        <ul>
            <li ng-repeat="number in numbers | limitTo: len / 2 + (len % 2)">{{number}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li ng-repeat="number in numbers | limitTo: - len / 2">{{number}}</li>
        </ul>
    </div>
</div>

Adding len % 2 helps to handle array oddity.

View demo

Answer 2

Method 1 : utilize the slice method on the collection

We can utilize the slice method on the collection :

<div ng-app="myApp" ng-controller="DemoCtrl" ng-init="half = numbers.length / 2">
    <div>
        <ul>
            <li ng-repeat="number in numbers.slice(0, half)">{{number}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li ng-repeat="number in numbers.slice(half)">{{number}}</li>
        </ul>
    </div>
</div>

View demo

Method 2 : apply the limitTo built-in filter

<div ng-app="myApp" ng-controller="DemoCtrl" ng-init="len = numbers.length">
    <div>
        <ul>
            <li ng-repeat="number in numbers | limitTo: len / 2 + (len % 2)">{{number}}</li>
        </ul>
    </div>
    <div>
        <ul>
            <li ng-repeat="number in numbers | limitTo: - len / 2">{{number}}</li>
        </ul>
    </div>
</div>

Adding len % 2 helps to handle array oddity.

View demo

AngularJS: Implement ng-repeat directive to generate two separate HTML containers

Answer №1

Similar questions

What is the best way to interpret and execute conditions specified within strings like "condition1 and condition2"?

Displaying various charts in a single view without the need for scrolling in HTML

The DOM seems to be producing NaN when receiving user input

Getting an attribute parameter within a directive: A step-by-step guide

Using the div id within JavaScript to create a new Google Maps latitude and longitude

"Sorry, but the request does not contain multiple parts" - using AngularJS with Spring Boot

Issue with Generating divs dynamically in Ionic Framework

Just starting out with jQuery: seeking advice on a user-friendly slideshow plugin, any tips on troubleshooting?

Error encountered during JSON parsing: unexpected non-whitespace character found after the JSON data on line 1

Exploring First-Person Shooter Rotation with THREE.JS

Creating a collection of interconnected strings with various combinations and mixed orders

Remove all keys of type BaseType from objects that are children of BaseType

Looking to transfer a file to a server with the help of angularJS, NodeJS, and ExpressJS

Is there a way for me to have Next.Js automatically download and serve all the external assets on my website?

The property 'body' cannot be read because it is undefined

Using PHP and AJAX, populate a table based on the selection made from a dropdown

Display a div when hovering over an image using jQuery

What steps can I take to troubleshoot this issue involving Django and AJAX?

What is the best way to include additional text in my scroll-to-top button that already features an icon?

What could possibly be causing my MongoDB collection to return an empty object?