We Keep Coding

How to create a Repeating Multiple Elements Using Ng-repeat-start and Ng-repeat-end in AngularJS?

I want to create a table where on click of one column row a new rows get display below that table. I mean normal table will be there and a + icon will be there on click of that + icon below that row 3-4 new rows will get displayed and again if i click on then + icon it should get close.
I got some success with one inner row but I want to show 3-4 rows like that for reference.
check code here
<tr class="trigger" ng-repeat-start="car in carList | filter:tableFilter" ng-click="main.activeRow = car.name">

As per my understanding, you want something like add & remove on the row itself. Before I start plz read here about difference between ng-repeat and ng-repeat-start if it helps.
Further to add about ng-repeat-start and -end source:here:
The ng-repeat-start directive works the same as ng-repeat, but will
repeat all the HTML code (including the tag it's defined on) up to and
including the ending HTML tag where ng-repeat-end is placed.
<header ng-repeat-start="item in items"> Header {{ item }} </header>
<div class="body"> Body {{ item }} </div>
<footer ng-repeat-end> Footer {{ item }} </footer>
Simply add $scope.carList.push(newcarlist); to add new rows.
Plz check working fiddle link here

ng-repeat on two (or more) rows

My array:
$scope.data = [1,2,3,4,5,6,7,8,9,10];
My HTML:
<div ng-repeat="item in data track by $index">{{item}}</span>
This will output, as expected: 12345678910.
But I want to display the array over two rows, as in the following sample:
12345 // break here
678910
I run some functions on this array, so I don't want to split the array into two smaller ones, cause that would mean I have to run these other functions twice as often. I have looked into the 'start end' part of ngRepeat, but honestly, I don't understand how it works, thoughts?
Note: this is an ionic application, if that matters.
Edit: I can't get the suggested answers to work, I though I could dumb down my code, and make it work, but no. this is my full html ng-repeat code:
<div class="row">
<div class="col" ng-repeat="item in data track by $index">
{{item}}
<br ng-if="$index == 4">
</div>
</div>
This did not work, how come? Anything with row or col?

You could use ng-if to insert a new line when the $index is equal to 4:
<div class="col">
<span ng-repeat="item in data track by $index">
{{item}}
<br ng-if="$index==4">
</span>
</div>
Here, we also move the ng-repeat to a span element inside the div. This solves any potential issues which may arise from the styling applied to the div.

You could also experiment with item.$middle.
item.$middle: true if the repeated element is between the first and last in the iterator
https://docs.angularjs.org/api/ng/directive/ngRepeat
<div ng-repeat="item in data track by $index">
{{item}} <br ng-if="item.$middle" />
</div>
?

AngularJS: open and close DOM element during different cycles of ng-repeat

I wonder if it is possible to open DOM element during first cycle of ng-repeat and close it during the second. Let's talk about some list of element, and I want to output it by 2 (or may be 3, 4... it does not matter) in a row. So result html will be like this:
<div class="row"> <!-- add this line during 1sr cycle -->
<div class="element">...element1...</div>
<div class="element">...element2...</div>
</div> <!-- add this line during 2nd cycle -->
<div class="row"> <!-- add this line during 3rd cycle -->
<div class="element">...element3...</div>
<div class="element">...element4...</div>
</div><!-- add this line during 4th cycle -->
The main problem that ng-repeat does not allows me to put line <div class="row"> on first cycle and put closing </div> on second cycle. ng-repeat add both of them during every cycle. Is it possible to find some workaround for this case?

It's not possible with ng-repeat. You have to either prepare the data structure in your controller (multi-dimensional array) or write a custom directive that would take and additional parameter of how many elements of the array take for the current iteration.
UPD: You can use lodash' chunk function to split the array into smaller arrays https://lodash.com/docs#chunk

As you said, you can't output only half an element (e.g. the opening tag without the closing tag) in one repeat cycle.
You can however do different things in one cycle based on the $index property, like showing or hiding a specific element in the first cycle ($index: 0).
Alternatively, have a look at ng-repeat-start and ng-repeat-end to output more than one element in a cycle. More info: https://docs.angularjs.org/api/ng/directive/ngRepeat

I have found simple solution out of the box in angularJs:
<div class="row" ng-repeat="element in elements" ng-if="$index%2==0">
<div class="element" ng-repeat="element in elements|limitTo:2:$index">...</div>
</div>
It will output 2 elements in a row, if you need more, you should adjust ng-if and limitTo argument.

AgularJS ng-repeat without repeating parent elements

What I bassically want to do is the following:
I have two columns and I want to fill them with data with a single ng-repeat but without repeating the columns themselves. I think that it may not be possilbe, but I had to try :)
->Start ng-repeat="item in items"
<div exclude-from-repeat class="col1"> -> append {{item.Name}} here </div>
<div exclude-from-repeat class="col2"> -> append {{item.Description}} here </div>
->End ng-repeat

<div ng-repeat="item in items" class="col{{$index}}">{{item}}</div>
I know it's not what you asked for, but it does assign a different class to each column. The $index in ng-repeat goes from 0 to items.length-1
You could also try to use ng-repeat-start and ng-repeat-end to have more flexibility. But in general, I do not think it is possible to exclude the parent element from the ng-repeat loop.

Problems using angular ng-style, not updating in IE

I've created a simple directive in Angular which generates a scroller to display some products.
I'm having an issue with one part of the code.
<ul ng-style="{'margin-left':{{currentMargin}}+'px'}">
<li ng-repeat="tyre in tyres" ng-style="{'width':{{liWidth}}+'px'}">
<div class="imageContainer"><img src="../Images/eutl/{{tyre.image}}"/></div>
<div class="details">
<h3>{{tyre.name}}</h3>
About this tire
</div>
</li>
</ul>
and this is what it looks like in the browser once executed
<ul ng-style="{'margin-left':0+'px'}">
<!-- ngRepeat: tyre in tyres -->
<li ng-repeat="tyre in tyres" ng-style="{'width':265+'px'}" class="ng-scope" style="width: 265px;">
<div class="imageContainer"><img src="../Images/eutl/tire.jpg"></div>
<div class="details">
<h3 class="ng-binding">Fuel Efficient</h3>
About this tire
</div>
</li>
<!-- end ngRepeat: tyre in tyres --></ul>
after executing this on my page I get the scroller and the ng-style inside the "li" elements gets displayed correctly, while the ng-style for the "ul" doesn't.
I've tried multiple solutions, even trying to add the same exact ng-style from the "li" element and it just doesn't get processed and no style is added.
Can anyone help me by pointing out a mistake in my markup or a possible cause for one ng-style working on the Li elements and the other not working on the UL itself?
The other problem I'm having is that the value of the currentMargin is not updating in IE8/9 and so on.
Thanks

ng-style accepts an Angular expression that evaluates to an object. This means that if you want to use a variable inside that expression, you can use it directly (without the double-curlies):
ng-style="{width: liWidth + 'px'}"
Double-curlies are used when you want to insert a dynamic, interpolated value to an argument that accepts a string, like <img alt="{{product.name}} logo">. You then put an expression inside those brackets.

Try to do :
ng-style="{'width':liWidth+'px'}">
No curly bracket, a lot of ng directive don't like it