Angular:How to generate image gallery using bootstrap and ng

i am learning angular and try to know how could i produce image gallery like output with ng-repeater.

demo screenshot url http://designshack.co.uk/wp-content/uploads/copypastelist-4.jpg

see the image then can understand what kind of output i am after.

here is sample html by which we can generate image gallery.
CSS

* {margin: 0; padding: 0;}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 500px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}

html

- "http://lorempixum.com/100/100/nature/1" />
- Headline
- Lorem ipsum dolor sit amet...
- "http://lorempixum.com/100/100/nature/2" />
- Headline
- Lorem ipsum dolor sit amet...
- "http://lorempixum.com/100/100/nature/3" />
- Headline
- Lorem ipsum dolor sit amet...
- "http://lorempixum.com/100/100/nature/4" />
- Headline
- Lorem ipsum dolor sit amet...

var app=angular.module('imggallery',[]);
app.controller('imageCtrl',function($scope){
$scope.img=[
{headline:'Headline1',source:'images/table.jpg'},
{headline:'Headline2',source:'images/paper.jpg'},
{headline:'Headline3',source:'images/computer.jpg'},
{headline:'Headline4',source:'images/ac.jpg'},
{headline:'Headline5',source:'images/sofa.jpg'}
];
});
"x in img">
"{{x.source}}" >

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Thiruppathi R9y ago
1. var app=angular.module('imggallery',[]);
2. app.controller('imageCtrl',function($scope){
3. $scope.img=[
4. {headline:'Headline1',source:'images/table.jpg'},
5. {headline:'Headline2',source:'images/paper.jpg'},
6. {headline:'Headline3',source:'images/computer.jpg'},
7. {headline:'Headline4',source:'images/ac.jpg'},
8. {headline:'Headline5',source:'images/sofa.jpg'}
9. {headline:'Headline1',source:'images/table1.jpg'},
10. {headline:'Headline2',source:'images/paper1.jpg'},
11. {headline:'Headline3',source:'images/computer1.jpg'},
12. {headline:'Headline4',source:'images/ac1.jpg'},
13. {headline:'Headline5',source:'images/sofa1.jpg'} ,
14. ];
15. $scope.arraySize = 5;
16. });
19. "x in img | limitTo:arraySize ">
20. "{{x.source}}" >

Note:

If you feel this

answer

suitable

for you

please

my answer

Angular:How to generate image gallery using bootstrap and ng

Headline

Headline

Headline

Headline