I am trying to get build a seat selection view for a cinema hall. I managed to iterate the objects from Arraylist but row_iterator gets stuck at 0 in line 3, where i set top position <i>(top: '+(row_iterator.index*20)+'px')</i>.
On lines 2 and 6 the iterator works. Any help appreciated
HTML:
<th:block class="hall__row" th:each="row, row_iterator: ${theater.getRows()}">
<div class="hall__places-row _left" th:attr="data-row=${row.getId()}" th:attrappend="style=${'top: '+(row_iterator.index*20)+'px'}"> </div>
<div class="hall__places-item is-free" th:each="seat, seat_iterator : ${row.getSeats()}" th:attr="data-row=${row.getId()}" data-column="1" data-price-id="1" data-pos-x="1" data-pos-y="12" data-state="free" data-price="40" data-place-size="20" th:attrappend="style=${'left: '+((seat_iterator.index+1)*20)+'px;'+'top: '+(row_iterator.index*20)+'px'}">
<div class="hall__places-chair" th:attr="data-title=${movie.getPrice()}" data-toggle="tooltip" data-placement="top"></div>
</div>
<div class="hall__places-row _right" th:attr="data-row=${row.getId()}" th:attrappend="style=${'top: '+(row_iterator.index*20)+'px'}"> </div>
</th:block>
Related
I have the following HTML where i am listing few items with Angular JS ng-repeat
<div class="header-container">
<div class="header-list" data-ng-repeat="details in response.data" data-ng-show='$index<3'>{{ details.name }}</div>
<div class="show-more" data-ng-if="details.length > 3"></div>
</div>
header-list and show-more are sibling divs and i have ng-repeat on header-list. i only want to show the div show-more if the number of items in header-list is more than 3. since the scope of the ng-repeat is not in show-more i cannot do this. is there a way to do this without changing the DOM structure? Thanks in advance
simple:
<div class="header-list" data-ng-repeat="details in response.data | limitTo: 3">{{ details.name }}</div>
<div class="show-more" data-ng-if="response.data.length > 3">View All</div>
I have an array of length 5 on which I'm looping over to create the rating scale as shown in the image below. How can I skip iterating over the first element (1) of the array and only render the div for the last four elements of the array (2, 3, 4, 5). I tried slicing the array first and then render but it doesn't help. Is there any way that the element remains in the array and I can skip over it in the HTML.
<div class="rating-type__pipe" #messageEl [attr.data-option-id]="opt._id" id="rating_id_right{{opt?._id}}"
*ngFor="let opt of positiveArray; index as i">
<div class="rating-type__pipe-pillar">
<span [ngStyle]="{'height': (i+1)*(100/positiveArray.length)+'%','opacity': (i+1)*(1/positiveArray.length)}" class="rating-type__pipe-pillar-bg"></span>
</div>
<div class="rating-type__pipe-text">{{opt.text}}</div>
</div>
You can use slice method to skip first element.
<div class="rating-type__pipe" #messageEl [attr.data-option-id]="opt._id" id="rating_id_right{{opt?._id}}"
*ngFor="let opt of positiveArray.slice(1); index as i">
<div class="rating-type__pipe-pillar">
<span [ngStyle]="{'height': (i+1)*(100/positiveArray.length)+'%','opacity': (i+1)*(1/positiveArray.length)}" class="rating-type__pipe-pillar-bg"></span>
</div>
<div class="rating-type__pipe-text">{{opt.text}}</div>
</div>
I created a dummy div for the first element and now it works fine.
Newbie to angularjs.trying to display data from json nested object like this
enter image description here
my html code is
<a rel="extranal" data-val="<%rcds%>" ng-repeat="rcds in rcd" class="international" id="<%rcds.id%>">
<span><img ng-src="<% rcds.routes.subroutes %>"/> <% rcds.subroutes[0].xyz%></span>
<div class="departure-time"><% rcds.subroutes[0].abc %></div>
</a>
want to display the data subroutes in the ng-repeat based on the condition of legtype in the json.how to do this.
if you want show your object as JSON the only thing that you need is write {{rcds | json}}
Otherwise if you want to navigate your nested object you should do somethings like:
<div ng-repeat="rcds in red">
<div ng-repeat="route in rcds.routes">
<!-- route element --->
<div ng-repeat="depart in route.depart">
<!-- depart element --->
<div ng-repeat="subroute in route.subroutes">
<!-- subroute element -->
</div>
</div>
</div>
</div>
I'm looping through an array which has 6 objects and using ngFor where I want to loop only up to 4 elements .. How Can I do that??
<div class="item active" *ngFor="#data of lengthArray">
content
</div>
In LengthArray I have 6 but how to loop up to 4 records only??
and also I want to loop from 4th record to 6th record in another div.. How can I start from 4th record??
You can use the slice pipe with a start and end parameter. The start parameter is required and the end parameter is optional.
<div class="item active" *ngFor="#data of lengthArray | slice:start[:end]">
content
</div>
You can capture the index and then make it less then 4
<div class="item active" *ngFor="#data of lengthArray;i=index">
<div *ngIf="i<=4">
content
</div>
</div>
I haven't really tested the code but you can find a lot of examples here on stackoverflow, do more researching...
Angular 2: how to apply limit to *ngFor?
More about filters...
How to apply filters to *ngFor
Simple solution:
<tr *ngFor=""let obj of ArrayogObjs; let i=index">
<td *ngIf="i<4">
{{obj.name}}
</td>
</tr>
I have the following html code on the page received by mechanize (agent.get):
<div class="b-resumehistorylist-views">
<!-- first date start-->
<div class="b-resumehistory-date">date1</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time1</div>
company1</div>
<!-- second date start -->
<div class="b-resumehistory-date">date2</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time2</div>
company2
</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time3</div>
company3</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time4</div>
company4</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time5</div>
company5</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time6</div>
company6</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time7</div>
company7</div>
...
</div>
I need to search inside the div with class="b-resumehistorylist-views" each date.
Then find all divs between two div-dates and link each item to this particular date.
The problem is that each item (div class = b-resumehistorylist-views) is not inside div=b-resumehistorylist-views.
At final stage I need to receive the following array:
array = [ [date1, time1, company1, companylink1], [date2, time2, company2, companylink2], [date2, time3, company3, companylink3],[date2, time4, company4, companylink4] ]
I know that I must use method search with text() option, but I cannot find the solution.
My code right now can parse all companies information between div class=b-resumehistory-company, but I need to find right date.
It would be the same thing as before, just some of the class attributes have been changed:
doc = agent.get(someurl).parser
doc.css('.b-resumehistory-company').map{|x| [x.at('./preceding-sibling::div[#class="b-resumehistory-date"][1]').text , x.at('.b-resumehistory-time').text, x.at('a').text, x.at('a')[:href]]}