Menu
I am having a problem with multiple ng-repeat elements when showing div elements as inline-block. There is a strange gap between elements where one ng-repeat ends and the next one starts, as illustrated by the image:
I have created a plunk to demonstrate this behavior:
Why is this happening and how to remove the gap?
416
Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or once per item in a collection of items. ng-repeat is mostly used on arrays and objects.
You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.
You can use $last variable within ng-repeat directive. Take a look at doc. Where computeCssClass is function of controller which takes sole argument and returns 'last' or null .
The data-ng-repeat allows the HTML to be validated through validators that do not understand Angular. The documentation is here with directives. This is from the docs: Angular normalizes an element's tag and attribute name to determine which elements match which directives.
Check this plunk
There is a hack to remove space between inline elements that appears at line-break.
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><!--
--><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><!--
--><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
You could read more about other hacks here.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
