Display buttons In the certain format using ng-repeat - css

Question

I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below,
sample = [
{
"id": 12,
"title": "title2",
"description": "description2_for the second"
},
{
"id": 13,
"title": "title3",
"description": "description3"
},
{
"id": 17,
"title": "title4",
"description": "description4"
},
{
"id": 18,
"title": "title5",
"description": "description5"
},
{
"id": 19,
"title": "title6",
"description": "description6"
},
{
"id": 20,
"title": "title7",
"description": "description7"
},
{
"id": 21,
"title": "title8",
"description": "description8"
},
{
"id": 22,
"title": "title9",
"description": "description9"
}
]
my code ng-repeat look like,
<div class="editor-preview">
<div class="row" >
<div class="col-md-4 " ng-repeat-start="i in sample track by $index">
<div class="tooltip"><button type="button" class="btn btn-primary btn-round-lg btn-lg">{{i.title}}</button>
<span class="tooltiptext">{{i.description}}</span>
</div>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
From the above code, UI is looking like below image.
But, I want to show the UI like the below image and 3 buttons per row
How to show the UI like above image in bootstrap css dynamically for alternative rows too

Answer 1

You can use list-inline for this layout:
http://jsfiddle.net/hstppbj8/804/
HTML:
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li ng-repeat="i in sample track by $index"><button class="btn btn-sm btn-primary">
{{i.title}}<span class="tooltiptext"> {{i.description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
CSS:
ul li {
margin: 4px 0; /*For spacing between li*/
}
Resize the jsfiddle window to see the layout properly.

Answer 2

try to have the text for the content to be different ( some are longer, some are much longer ) for each of the button. It should be prolonged as the class ".btn" css has {display: inline-block} in them. Then make sure there is a wrapper around these buttons and make them { text-align: center }

Answer 3

In angular 1 ng-repeat has been used. But in ng-5 this syntax has been changed with ng-for. I would suggest you to please use the ng-for to use the angular loop. in that case Your code will be like the following.
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li *ngFor="let item of items; let i = index""><button class="btn btn-sm btn-primary">
<span class="tooltiptext"> {{i}} {{description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
</div>
</div>
</div>