DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Change Column in Syncfusion TreeGrid Angular
  • Difference Between Bootstrap and AngularJS in 2022
  • The Most Popular Angular UI Libraries To Try in 2021
  • How to Use Bootstrap to Build Beautiful Angular Apps

Trending

  • The Emergence of Cloud-Native Integration Patterns in Modern Enterprises
  • Supercharging Productivity in Microservice Development With AI Tools
  • How to Configure Istio, Prometheus and Grafana for Monitoring
  • A Better Web3 Experience: Account Abstraction From Flow (Part 1)
  1. DZone
  2. Coding
  3. Frameworks
  4. Filling Multiple Columns in Bootstrap Using AngularJS

Filling Multiple Columns in Bootstrap Using AngularJS

Need to fill up several Bootstrap columns in AngularJS? It might not be as simple as you make sense. Luckily, there's a nice method for achieving this feat.

Remigijus Kutkaitis user avatar by
Remigijus Kutkaitis
·
Dec. 10, 15 · Tutorial
Like (3)
Save
Tweet
Share
28.76K Views

Join the DZone community and get the full member experience.

Join For Free

A few days ago I was working on my side project which is built using AngularJS and Bootstrap. I wanted to fill two columns with some data from the controller. At the beginning, I thought that this will be easy, some kind of integrated stuff, but it wasn't.

So here's the problem: we have a web page, written using Bootstrap and AngularJS. There we have a two columns and they need to be filled with person's name and age:

Image titleHow do we achieve that?

We have a controller which contains array of 'persons' filled with objects:

 readItApp.controller('ColumnsCtrl', function($scope){
    $scope.persons = [
        {'name': 'John',
            'age': '35'},
        {'name': 'Peter',
            'age': '14'},
        {'name': 'Amanda',
            'age': '23'},
        {'name': 'Joseph',
            'age': '17'},
        {'name': 'Juliet',
            'age': '2'}
    ]
 });

In index.html we have two columns:

<div ng-controller="ColumnsCtrl" class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-sm-offset-1">
            <button class="btn btn-info btn-lg btn-block"><span class="badge"></span>
            </button>
        </div>
        <div class="col-xs-12 col-sm-4 col-sm-offset-2">
            <button class="btn btn-success btn-lg btn-block"><span class="badge"></span></button>
        </div>
    </div>
</div>

It's nothing hard to fill one column using the ng-repeat directive, but at this point we have two. If we would use ng-repeat without any tweaks, we would get the same person printed in the first and the second columns.

Solution is quite simple:

<div ng-controller="ColumnsCtrl" class="container">
    <div class="row" ng-repeat="person in persons" ng-if="$index % 2 == 0">
        <div class="col-xs-12 col-sm-4 col-sm-offset-1">
            <button class="btn btn-info btn-lg btn-block">{{persons[$index].name}} <span class="badge">{{persons[$index].age}}</span>
            </button>
        </div>
        <div class="col-xs-12 col-sm-4 col-sm-offset-2">
            <button class="btn btn-success btn-lg btn-block" ng-if="persons[$index + 1].name != null">{{persons[$index +
                1].name}} <span class="badge">{{persons[$index + 1].age}}</span></button>
        </div>
    </div>
</div>

We need to use the $index, which indicates a current position of 'persons' array in ng-repeat. At this point, when loop goes to the second column, need to add 1 to the $index. This way we will get the next element from the array.

But that's not all. If we would leave like that, we would get duplicated data to columns as well, because the person we got using $index + 1 would be repeated during next loop in the first column. To avoid that, need to introduce ng-if="$index % 2 == 0"

<div class="row" ng-repeat="person in persons" ng-if="$index % 2 == 0">

Which means, that if $index is not even skip everything and move to another object in the array.

P.S. Notice line in the second column

When the last array element is printed in the first column we need to skip the second column otherwise it would be empty. This is used to avoid such situations.

P.S.S. This method can be used with more than two columns. The most important thing, that the $index which starts filling the first column in the loop would divide without residue from the total number of columns.  E.g. for three columns:

ng-if="$index % 3 == 0

Full example: GitHub

Column (database) AngularJS Bootstrap (front-end framework)

Published at DZone with permission of Remigijus Kutkaitis. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Change Column in Syncfusion TreeGrid Angular
  • Difference Between Bootstrap and AngularJS in 2022
  • The Most Popular Angular UI Libraries To Try in 2021
  • How to Use Bootstrap to Build Beautiful Angular Apps

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: