I'm using a carousel that I should render 2 items in each ng-repeat cycle like this:
<div owl-carousel-item="" ng-repeat="item in (filteredItems = (items | filter:query))" class="item">
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::item.name}}</li>
</ul>
</div>
<img ng-src="{{::item.image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
<--PART2: Item must go to next Item for this part -->
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::filteredItems[$index + 1].name}}</li>
</ul>
</div>
<img ng-src="{{::filteredItems[$index + 1].image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
</div>
I means in Part2 define in code, I need to move to next item before ng-repeat is called again, I'm using $index+1 but it's not good for me,
I want to it to permanently move to next item not just accessing to it
Does it have something like item.Next() or something?
You could for example try something like this:
<tr ng-repeat="item in items" ng-if="$index % 2 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
</tr>
it may be enough to do the trick for you :)
Edit:
For 3 items you could do:
<tr ng-repeat="item in items" ng-if="$index % 3 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
<td class="text-center">{{items[$index + 2].id}}</td>
</tr>
Related
I have made a table to display a list of child pages in sightly. I want to work on pagination in the list. This is my slightly code snippet. I have tried different approches but still no success. I am new to javascript so I am facing issues in finding the best approach.Can please help me with the correct way to achieve this.
<tfoot>
<tr class="footable-paging">
<td colspan="5">
<div class="footable-pagination-wrapper">
<ul class="pagination" id="demo">
<li class="footable-page-nav disabled" data-page="first" aria-label="first page">
<a class="footable-page-link" href="${request.requestURL.toString}">«</a>
</li>
<li class="footable-page-nav disabled" data-page="prev" aria-label="previous" id="prev-page">
<a class="footable-page-link" href="${request.requestURL.toString}">‹</a>
</li>
<li class="footable-page visible active" data-page="1" aria-label="page 1">
<a class="footable-page-link" href="${request.requestURL.toString}">1</a>
</li>
<li class="footable-page visible" data-page="2" aria-label="page 2">
<a class="footable-page-link" href="${request.requestURL.toString}">2</a>
</li>
<li class="footable-page-nav" data-page="next" aria-label="next" id="next-page">
<a class="footable-page-link" href="${request.requestURL.toString}">›</a>
</li>
<li class="footable-page-nav" data-page="last" aria-label="last page">
<a class="footable-page-link" href="${request.requestURL.toString}">»</a>
</li>
</ul>
<div class="divider"></div>
<span class="label label-default"></span>
</div>
</td>
</tr>
</tfoot>
<tbody id="body">
<tr class="ninja_table_row_0 nt_row_id_157" id="tr" data-sly-repeat.child="${currentPage.listChildren}">
<td class="ninja_column_0 ninja_clmn_nm_logoname footable-first-visible" style="display: table-cell;">
<a href="${child.getProperties['path']}.html">
<img src="${child.getProperties['logo']}" alt="${child.getProperties['company']}">
</a>
</td>
<td class="ninja_column_1 ninja_clmn_nm_company" style="display: table-cell;">
${child.getProperties['company']}
</td>
<td class="ninja_column_2 ninja_clmn_nm_boothno" style="display: table-cell;">${child.getProperties['boothNo']}</td>
<td class="ninja_column_3 ninja_clmn_nm_country" style="display: table-cell;">${child.getProperties['country']}</td>
<td class="ninja_column_4 ninja_clmn_nm_profile footable-last-visible" style="display: table-cell;">${child.getProperties['profile']}</td>
</tr>
</tbody>
HTL/Sightly has iteration control for some time already, see the data-sly-repeat spec:
<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection # begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>
You can use that in conjunction with URL parameters to set the begin and end of your list page.
I Have a dynamic content rendered from angular that generates a follow HTML:
<div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first">
<table>
<td><img width="60px" [ngClass]="{lastArrow: first }" src="../../assets/images/arr.png" alt=""></td>
<td class="steps" [ngClass]="{ last: last }">
<img class="completeimg" src={{step.img}} alt="">
<p class="card-text1"> Step {{i+1}}: Completed</p>
<p class="card-text1">{{step.ReturnDisplayC}}</p>
<p class="card-text1"><b>Date:</b> {{step.ReturnStatus}}</p>
<p class="card-text">{{step.ReturnStatus}}</p>
</td>
</table>
</div>
I want to remove arrow before image for this dynamic data.
How can I remove arrow image for next line of data as highlighted in below image?
You can remove the td for arrow image.
<div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first">
<table>
<td class="steps" [ngClass]="{ last: last }">
<div style="display: inline;">
<img class="completeimg" src={{step.img}} alt="">
<p class="card-text1"> Step {{i+1}}: Completed</p>
<p class="card-text1">{{step.ReturnDisplayC}}</p>
<p class="card-text1"><b>Date:</b> {{step.ReturnStatus}}</p>
<p class="card-text">{{step.ReturnStatus}}</p>
</div>
<img width="60px" [ngClass]="{lastArrow: first }" src="../../assets/images/arr.png" alt="">
</td>
</table>
</div>
I have an issue with Drag and Drop with Angular JS on my Quiz
The code works fine if I just use one object simulated here by the index number i.e. as shown below myQuest[0].answers
ng-repeat="myQuestion in myQuest | limitTo: 5">
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest[0].answers ">
<img ng-src="{{ Answer.image }}">
{{Answer.id}}
</li>
<p class="txt">{{analysis}}</p>
<div class="feedback">
but fails when I use the code below which is required to move to next question i.e myQuest[$index].answers of the question to be answered
Symptoms: The Drag and Drop reorder image reorders by moving an answer to the next object /question and not the question been answered
ng-repeat="myQuestion in myQuest | limitTo: 5">
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest[$index].answers ">
<img ng-src="{{ Answer.image }}">
{{Answer.id}}
</li>
<p class="txt">{{analysis}}</p>
<div class="feedback">
I've tried track by $index on both parent and child ng-repeats to no avail
This fixed it thankyou lzagkaretos
ng-repeat="myQuestion in myQuest track by $index | limitTo: 5"
ng-init="**questionIndex** = $index" >
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest****[questionIndex]**.answers"
ng-init="answerIndex = $index" >
I have a page displaying 3 images in a row, using Ng-repeat, but no matter which image I click, I only see the image of the FIRST image displayed in that specific row.
Template:
<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
<div class="col col-33" ng-if="$index < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 1 < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 2 < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
</div>
</div>
ng-click function:
$scope.seeOne = function (image) {
window.localStorage['fbid'] = image.fbid;
$state.go('app.oneimg');
}
$scope.images:
angular.forEach(value, function (value, key) {
if (key == 'photo') {
$scope.images.push({
id: i,
fbid: inventorykey,
src: ("data:image/jpeg;base64," + value)
});
i = i + 1;
}
})
You're repeating <div ng-click="seeOne(image)"> 3 times in this example, where image only refers to the first one of the 3 images you're displaying. If you change that line to match the <img> tag beneath it, you get the result you're looking for. Something like this:
<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
<div class="col col-33" ng-if="$index < images.length">
<div ng-click="seeOne(images[$index])">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 1 < images.length">
<div ng-click="seeOne(images[$index+1])">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 2 < images.length">
<div ng-click="seeOne(images[$index+2])">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
</div>
</div>
{{images[$index].src}} is wrong. use {{image.src}} instead.
The $index will change at each iteration, but there is only one variable. so at the end of the rendering all images will be the same as the refer to the same index. it doesn't matter what was the value when the page is rendered. It matters whats the value at the end of the angular digest phase.
To achieve your use case you need to set and use a local variable into the ng-repeat scope:
<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0" ng-init="myIndex = $index">
<div class="col col-33" ng-if="$index < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[myIndex].src}}" width="100%" />
</div>
</div>
Alternative: Put the data in the proper structure (an 2d array) and use nested ng-repeat - makes your life much easier
I set up an ng-repeat to rollout a bunch of elements from a JSON file however I would like each element to have a incremental class name .item-1, .item-2, .item-3.
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ item.length }}"></span>
</div>
</div>
I would like to add the number to class="item-{{ item.length}}" but I can't seem to get this working.
I don't know what is the benefit of generating dynamic class names like this. A class should mean a class of similar objects.
It's still possible with $index:
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngRepeat
As documented on https://docs.angularjs.org/api/ng/directive/ngRepeat just use $index
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>