Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

Question

Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

I am currently customizing a template for my MEAN app and I am trying to showcase some information retrieved from the database in three columns. However, I am facing an issue where the ng-repeat function is only displaying the data in a single column.

Below is the code snippet:

<div class="row mt-5">
  <div ng-repeat="woman in women">
    <div class= "col-md-4">
        <!--Card-->
          <div class="card">
              <!--Card image-->
              <img class="img-fluid" src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
              </div>
          </div>
          <!--/.Card-->
    </div>
  </div>
</div>

Currently, I am resizing the images to have a uniform size. Additionally, I am looking to only display a portion of the images in this view, with the full image being visible in the detailed view.

Thank you!

javascript css angularjs twitter-bootstrap

Answer 1

Answer №1

Take a look at this and confirm if it meets your requirements:

<body ng-app="test">
<div class="row mt-5" ng-controller="testCtrl">
  <div ng-repeat="woman in women">
    <div class= "col-md-4">
        <!--Card-->
          <div class="card flexcss">
              <!--Card image-->
              <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
              </div>
          </div>
          <!--/.Card-->
    </div>
  </div>
</div>
</body>

CSS:

.flexcss{
  display:flex;
  flex-direction: row
}
.card-body{
  padding:5px;
}

JS:

var app= angular.module('test',[]);

app.controller('testCtrl', function($scope, $http) {
    $scope.women= [
      {
      image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
      name:'wonder women',
      field:'war',
      job:'saviour'
     },
            {
      image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
      name:'super girl',
      field:'war',
      job:'fighter'
     },
      {
      image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
      name:'Bat Woman',
      field:'war',
      job:'fighter'
     }
      ]
  }

)

https://codepen.io/shankkie/pen/QMmKxz

Answer 2

Take a look at this and confirm if it meets your requirements:

<body ng-app="test">
<div class="row mt-5" ng-controller="testCtrl">
  <div ng-repeat="woman in women">
    <div class= "col-md-4">
        <!--Card-->
          <div class="card flexcss">
              <!--Card image-->
              <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
              </div>
          </div>
          <!--/.Card-->
    </div>
  </div>
</div>
</body>

CSS:

.flexcss{
  display:flex;
  flex-direction: row
}
.card-body{
  padding:5px;
}

JS:

var app= angular.module('test',[]);

app.controller('testCtrl', function($scope, $http) {
    $scope.women= [
      {
      image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
      name:'wonder women',
      field:'war',
      job:'saviour'
     },
            {
      image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
      name:'super girl',
      field:'war',
      job:'fighter'
     },
      {
      image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
      name:'Bat Woman',
      field:'war',
      job:'fighter'
     }
      ]
  }

)

https://codepen.io/shankkie/pen/QMmKxz

Answer 3

Answer №2

Make sure to use ng-src instead of src when you want to display images.

<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">

DEMO

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
  $scope.women = [
  {"_id":"5992b00cf8f760203378872f","name":"Ada Lovelace (Ada Byron)","birthDate":"10 de diciembre de 1815","deceaseDate":"27 de noviembre de 1852","field":"Mathematics","job":"Matemática y escritora, creadora del primer algoritmo para programar una máquina","bio":"Su padre fue el conocido poeta George Byron, y su madre, Anne Isabella Noel Byron, poeta y matemática. (...). Ada Byron se refería a sí misma como una científica poetisa y como analista (y metafísica)","image_url":"https://i.pinimg.com/736x/7b/db/e4/7bdbe44fda240b5992b2ce570e273719--kate-winselt-adrienne-bailon.jpg"},
  {"_id":"5992b00cf321360203378872f","name":"Jon right (Ada Byron)","birthDate":"10 de diciembre de 1815","deceaseDate":"27 de noviembre de 1852","field":"Mathematics","job":"Matemática y escritora, creadora del primer algoritmo para programar una máquina","bio":"Su padre fue el conocido poeta George Byron, y su madre, Anne Isabella Noel Byron, poeta y matemática. (...). Ada Byron se refería a sí misma como una científica poetisa y como analista (y metafísica)","image_url":"https://media.vanityfair.com/photos/57e15c417dd0d7d276c7cb7c/master/h_590,c_limit/angelina-jolie-vf-december-2014-ss02.jpg"}
  
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
 <div ng-repeat="woman in women">
    <div class= "col-md-4">
        <!--Card-->
          <div class="card">
              <!--Card image-->
              <img class="img-fluid" src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
              </div>
          </div>
          <!--/.Card-->
    </div>
  </div>
</body>

Answer 4

Make sure to use ng-src instead of src when you want to display images.

<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">

DEMO

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
  $scope.women = [
  {"_id":"5992b00cf8f760203378872f","name":"Ada Lovelace (Ada Byron)","birthDate":"10 de diciembre de 1815","deceaseDate":"27 de noviembre de 1852","field":"Mathematics","job":"Matemática y escritora, creadora del primer algoritmo para programar una máquina","bio":"Su padre fue el conocido poeta George Byron, y su madre, Anne Isabella Noel Byron, poeta y matemática. (...). Ada Byron se refería a sí misma como una científica poetisa y como analista (y metafísica)","image_url":"https://i.pinimg.com/736x/7b/db/e4/7bdbe44fda240b5992b2ce570e273719--kate-winselt-adrienne-bailon.jpg"},
  {"_id":"5992b00cf321360203378872f","name":"Jon right (Ada Byron)","birthDate":"10 de diciembre de 1815","deceaseDate":"27 de noviembre de 1852","field":"Mathematics","job":"Matemática y escritora, creadora del primer algoritmo para programar una máquina","bio":"Su padre fue el conocido poeta George Byron, y su madre, Anne Isabella Noel Byron, poeta y matemática. (...). Ada Byron se refería a sí misma como una científica poetisa y como analista (y metafísica)","image_url":"https://media.vanityfair.com/photos/57e15c417dd0d7d276c7cb7c/master/h_590,c_limit/angelina-jolie-vf-december-2014-ss02.jpg"}
  
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
 <div ng-repeat="woman in women">
    <div class= "col-md-4">
        <!--Card-->
          <div class="card">
              <!--Card image-->
              <img class="img-fluid" src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
              </div>
          </div>
          <!--/.Card-->
    </div>
  </div>
</body>

Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

Answer №1

Answer №2

Similar questions

Tips for designing a customizable color scheme for your website

Using Axios to fetch data and populating select dropdown options in a Vue component

Book a spot in IndexedDB storage

AngularJS - "Refrain from replicating items in a repeater"

Client-side validation with Jquery is failing to function properly

Using jQuery to determine if the child element is a <ul> tag

Express.js receiving JSON POST data with AngularJS incorrectly interpreted as keys instead of values

I developed a compact application utilizing Node.js in tandem with Express framework

Transferring data through Ajax, Jquery, and PHP: A seamless process

Issue with invoking Bracket-Shell bespoke Native (C++) Method

Extracting the content within HTML tags using regular expressions

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Error: The function or method save() has not been resolved

Reliable Dropdown Navigation Bars

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

Basic website layout

The process of dynamically populating data into a select element through an Ajax request using JavaScript may seem complicated at

Unique twist on the Bootstrap grid: perfectly centered

Synchronizing validation processes across both front-end and back-end applications

Troubleshooting: Issue with displaying PHP data on an AngularJS table using JSON through jQuery AJAX