We Keep Coding

Angular 4 - Printing a unique and dynamic value on an HTML with Angular's *ngFor

So i am presented with a task from the client to make a loop of div elements draggable. To make this happened, i have used angular2-draggable to make it possible.
It works on a single div that has not been looped over, as seen below:
<div ngDraggable [handle]="DemoHandle" class="card">
<div #DemoHandle class="card-header">I'm handle. Drag me!</div>
<div class="card-block">You can't drag this block now!</div>
</div>
But the question is, how to i make take this code an place it into an *ngFor loop in Angular (maybe just like the code seen below)?
<div *ngFor="let myValue of myValues" [handle]="{{myValue.id}}">
<div #{{ myValue.id }} >{{ myValue.title }}</div>
</div>
The problem here is that both this [handle]="DemoHandle" and #DemoHandle (Im talking about the DemoHandle value) needs to be unique. But i have no way to print a unique value similar to this code below:
<div *ngFor="let myValue of myValues">
<div [attr.id]="myValue.id" >{{ myValue.title }}</div>
</div>
How do i go about this?

Template reference variables are unique within enclosed view. *ngFor directive create embedded view for each item so that template reference variable is unique there.
So just try the following:
<div ngDraggable *ngFor="let item of [1,2,3]" [handle]="DemoHandle">
<div #DemoHandle class="card-header">I'm handle {{item}}. Drag me!</div>
...
</div>
Ng-run Example

How to reset the value of $index in ng-repeat nested loops?

I have this code and not sure is it right or wrong the way to implement it. But definitely so far not working in my view.
<div ng-repeat="data in DataObject">
<ul style="list-style-type:decimal !important;">
<li ng-repeat="(indexX,answer) in bkm.content_detail.question_data.question_content[0].question_answer[0].answer_text track by $index">
{{indexX+1}} - {{answer | joinBy : " / "}}
</li>
<div ng-init="indexX=0"></div>
</ul>
</div>
Well, I tried to make value of indexX=0 at ng-init="indexX=0". Is it true the way I've done it?
The purpose I need to reset the value of indexX is because of nested loop of ng-repeat at the outer div.

You can add a directive to your ng-repeat loop that can utilize the scope.$last parameter to reset your index on the last element.
Example:
https://stackoverflow.com/a/13472605/6452040

ng-repeat not working consistently with arrays of items

I have two arrays of strings that I want to repeat within my page. Here are the arrays (infoData and modelData) in the debugger:
Screenshot of arrays in Chrome inspector:
Here is my html:
<div ng-repeat="info in pTab.infoData">
<p>{{info}}</p>
</div>
<div ng-repeat="stats in pTab.modelData">
<p>{{stats}}</p>
</div>
However the page only displays the contents of infoData as shown below:
XPE
www.sampleurl.com
Sample summary has nulla quis lorem ut libero malesuada feugiat...
My question is why does this happen and how can I get the elements of the second array to display like the first?
Here is some additional info that may be useful to you. As I was trying out different things this struck me as interesting:
The following HTML:
<div ng-repeat="info in pTab.infoData">
<p>{{pTab.infoData}}</p>
</div>
<div ng-repeat="stats in pTab.modelData">
<p>{{pTab.modelData}}</p>
</div>
displays the infoData array in square brackets as a string 3 times (infoData has a length of 3).While the following HTML:
<div ng-repeat="info in pTab.infoData">
<p>{{pTab.modelData}}</p>
</div>
<div ng-repeat="stats in pTab.modelData">
<p>{{pTab.infoData}}</p>
</div>
displays the modelData array in square brackets as a string 3 times.
Is there something wrong with the <div ng-repeat="stats in pTab.modelData">? Because whatever is in that div never repeats, even if I move that div ahead of the <div ng-repeat="stats in pTab.modelData">
If I'm being unclear or you'd like to see more of the code, please let me know. Thank you very much for your time.

If you look in browser console you can see error like this
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: stats in pTab.modelData, Duplicate key: string:0.1 mg, Duplicate value: 0.1 mg
So, you have duplicated items in your second array, and for resolve this error should use track by expression, in this case enough $index
<div ng-repeat="stats in pTab.modelData track by $index">
A bit more about it you can see in doc: Tracking and Duplicates
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.pTab = {
modelData: [
'0.1 mg',
'0.1 mg',
'0.1 mg'
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='ctrl'>
<h1>Hello Plunker!</h1>
<div ng-repeat="stats in pTab.modelData track by $index">
<p>{{stats}}</p>
</div>
</div>

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.

Angular JS - How to add extra DIV in ng-repeat

I have an array a=[1,2,3,4,5,6].
Using ng-repeat on this array, I am creating 6 divs.
Please refer to this plunker
Is there any way to add one more div after each row. So after 3 divs I want to add one extra div.
I looked into this example. but they are creating a child div. is it possible to create a sibling div in ng-repeat

Let's try ng-repeat-start & ng-repeat-end.
<div class="example-animate-container">
<div class="square" ng-repeat-start="friend in a">
{{$index}}
</div>
<div ng-if="$index % 3 == 2" ng-repeat-end>
extra div
</div>
</div>
Please note that ng-repeat-start directive is included since angular 1.2.1.
plnkr demo
ng-repeat: repeat a series of elements of "one" parent element
<!--====repeater range=====-->
<Any ng-repeat="friend in friends">
</Any>
<!--====end of repeater range=====-->
ng-repeat-start & ng-repeat-end: using ng-repeat-start and ng-repeat-end to define the start point and end point of extended repeater range
<!--====repeater range start from here=====-->
<Any ng-repeat="friend in friends" ng-repeat-start>
{{friend.name}}
</Any><!-- ng-repeat element is not the end point of repeating range anymore-->
<!--Still in the repeater range-->
<h1>{{friend.name}}</h1>
<!--HTML tag with "ng-repeat-end" directive define the end point of range -->
<footer ng-repeat-end>
</footer>
<!--====end of repeater range=====-->

The ng-repeat-start and ng-repeat-end syntax was introduced for this exact purpose. See the documentation http://docs.angularjs.org/api/ng/directive/ngRepeat
So you'll do something like:
<div ng-init="a = [1,2,3,4,5,6]">
<div class="example-animate-container">
<div class="square" ng-repeat-start="friend in a">
{{$index}}
</div>
<div ng-repeat-end>Footer</div>
</div>

You can use a empty div as a container for your repeat. And then only render the child element's as squares (or what ever you want). This way, your extra div will be a sibling and not a child.
See my example: http://plnkr.co/edit/xnPHbwIuSQ3TOKFgrMLS?p=preview

take a look at this plunker here, could it be your solution? i don't understand really well your problem because i think it's better if instance your array in an external js file, but other than that take a look here plunker