Issue
I am in the process of implementing my first site with Java programming language and Spring Boot, and I encountered a problem in the front-end section. Due to my lack of previous experience, I don't know what the problem is. Problem title: How should I use the ng-repeat command to repeat the image?
Before using the command:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere Default command:<br/>
<div class="card" style="width: 18rem;" ng-repeat="item in items track by $index" >
<img src="../src/images/tube.webp" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
After using the command:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere ___________________________________________________________________Solution
To use Angularjs ng-repeat
you need to assign items
some data in the form of an array in your controller. You can then reference that with item in the html template and it will repeat the data and you can then reference the specific element in the template.
template:
<div class="card" style="width: 18rem;" ng-repeat="item in items track by $index" >
<img src="{{item.img}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.title}}</h5>
<p class="card-text">{{item.description}}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div
controller:
class HomeCtrl {
constructor($scope) {
'ngInject';
this.name = 'AngularJS';
this.items = [
{
img: 'http://placekitten.com/200/200',
title: 'Card title 1',
description: 'Some quick example text to build on the card title and make up the bulk of the cards content.',
},
{
img: 'http://placekitten.com/250/200',
title: 'Card title 2',
description: 'Some quick example text to build on the card title and make up the bulk of the cards content.',
},
];
}
}
export default HomeCtrl;
I have created an example here to show it running.
Answered By - Nils Kähler
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.