<div ng-init="num_cover_photo:new Array(4)">
<div ng-repeat="photo in num_cover_photo">
<img ng-src="cover_"{{$index}} />
</div>
</div>
I know above code won't work, but that's my idea. I don't want to declare something like this
$scope.cover_photo = [{
bla
bla
}]
because what I want is simple, able to use ng-repeat to build few block of markup. I'd google but many suggested I create a dumb array of object in controller. Any clue I can ng-init it on the fly?
If all you want to do is create a few blocks of markup, you could do a simple for loop in the ng-repeat
like so:
<div data-ng-repeat="i in [1,2,3,4,5]">
do something
</div>
to create 5 blocks.
Might I suggest initializing the array with the numbers you want to use and then referencing them in the ng-repeat instead of using $index
<div ng-init="num_cover_photo=[1, 2, 3, 4]">
<div ng-repeat="photo in num_cover_photo">
<img ng-src="cover_{{photo}}" />
</div>
</div>
maybe it helps you;
<div ng-repeat="i in Num(4) track by $index">
<img ng-src="cover_"{{$index}} />
</div>
$scope.Num = function(num) {
return new Array(num);
}
Related
I'm new to using flask and javascript.
I have div's being created with information like this
<div id="divholder">
{%for i in volcanoinfo%}
<div class="volcdiv">
<p id="volcanolat" style="display: none;">{{ i['vlat'] }}</p>
<p id="volcanolon" style="display: none;">{{ i['vlng'] }}</p>
</div>
{%endfor%}
</div>
I would then like to access each 'volcdiv' using a for loop for use else where.
Is this possible?
Yes, you can:
const items = document.querySelectorAll('.volcdiv div');
this will give you items as a NodeList. You can then use the spread functionality to turn that into an array and then iterate through:
[...items].forEach(item => {
// iterating through each div
});
alsio as #Rory stated, you don't want to re-use an id.
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
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>
?
I am trying have my angular ng-repeat randomize the items when they appear. The random function I am currently using is below, however when i use this function I get a infdig, causing all sorts of problems. I dont want to do the randomize in the controller because both of these ng-repeats come from the same entry where there is a url and a name but the entry id is in both instances so it would be easier if I dont have to create separate arrays. So does anyone know of a random filter that can be used for this, that wont give me the infdig problems?
$scope.random = function(){
return 0.5 - Math.random();
};
<div ng-repeat="actor in actors | orderBy:random">
<div class="col-md-2">
<div class='imageDropTo'>
<img class='imageDropTo' src={{actor.url}} data-id= {{actor.id}}>
</div>
</div>
</div>
<div ng-repeat="actor in actors | orderBy:random">
<div class='col-md-2'>
<p id='{{actor.id}}' class='namesToDrag'> {{actor.name}} </p>
</div>
</div>
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.