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.
Related
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
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
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>
?
How do I write an angular expression that checks each child item in a list and returns true if any child has a certain property value?
I have a chart legend being generated by an ng-repeat expression. Now I want to show the wrapping element only if any of the child items in the list has the property "datavisible" set to true.
Currently I have a $scope variable "anydatavisible" being set to true if any of the data series is activated so I can use that in an expression.
<div class="chart-legend" ng-show="anydatavisible">
<div ng-repeat="item in model.Accounts track by item.Id" ng-if="item.datavisible">
{{item.Name}}
</div>
</div>
I was wondering I can get the same result by using an expression that checks each child so I don't have the need for the variable "$scope.anydatavisible".
I'm looking for something like this:
<div class="chart-legend" ng-show="any(model.Accounts).datavisible">
<div ng-repeat="item in model.Accounts track by item.Id" ng-if="item.datavisible">
{{item.Name}}
</div>
</div>
Try this:
<div class="chart-legend" ng-show="(model.Accounts | filter:{datavisible:true}).length > 0">
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