how make ng repeat run only 10 times - angularjs

I have to modify the UI for a Leshan Client. Currently the way it is setup, it displays every instance of the client in the browser. How do i make it display only 10 clients, although I will be still creating hundreds of them? I tried to modify the code below for ng repeat and ng click but the only thing that changes is that I stop displaying any of the clients.
<tbody>
<tr ng-repeat="client in clients" ng-click="showClient(client)">
<td><a ng-href="#/clients/{{client.endpoint}}"> <strong>{{client.endpoint}}</strong></a> </td>
<td>{{client.registrationId}}</td>
<td>{{client.registrationDate | date:'medium'}}</td>
<td>{{client.lastUpdate | date:'medium'}}</td>
<td><i class="glyphicon glyphicon-info-sign" tooltip-html-unsafe="{{clientTooltip(client)}}"></i></td>
<td><span ng-class="{hidden: client.secure == false}" class="glyphicon glyphicon-lock" tooltip-html-unsafe="Communication over DTLS"></span></td>
</tr>
</tbody>

<tbody>
<tr ng-repeat="client in clients | limitTo:10" ng-click="showClient(client)">
<td><a ng-href="#/clients/{{client.endpoint}}"> <strong>{{client.endpoint}}</strong></a> </td>
<td>{{client.registrationId}}</td>
<td>{{client.registrationDate | date:'medium'}}</td>
<td>{{client.lastUpdate | date:'medium'}}</td>
<td><i class="glyphicon glyphicon-info-sign" tooltip-html-unsafe="{{clientTooltip(client)}}"></i></td>
<td><span ng-class="{hidden: client.secure == false}" class="glyphicon glyphicon-lock" tooltip-html-unsafe="Communication over DTLS"></span></td>
</tr>
</tbody>

use ng-if
<div ng-repeat="i in values">
<div ng-if="i < 3">Hello</div>
</div>
working example
or use an auxiliar variable just to display the results you want

Related

How to get multiple <td> values in single xpath in selenium

I am stuck in creating xpath which is under TR tag and
i want to get the value of td[2], td[3], td[4] and td[5] from each TR tag. See below HTML.
<tbody>
<tr role="row" class="odd">
<td><img src="/Content/Uploaded//Profile//MasterAdmin/ashishadmin/95.jpg" class="profilepic img-responsive img-circle"></td>
<td>Ashish A Admin</td>
<td>ashishad#mailinator.com</td>
<td></td>
<td>ashishadmin</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
<tr role="row" class="even">
<td><img src="/Content/Uploaded//Profile//MasterAdmin/shpatel/download.jpg" class="profilepic img-responsive img-circle"></td>
<td>Shree A Patel</td>
<td>shpatel#mailinator.com</td>
<td>8767676766</td>
<td>shpatel</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
<tr role="row" class="odd">
<td><img src="/content/custom/img/default-user.jpg" class="profilepic img-responsive img-circle"></td>
<td>Ashish G Savaliya</td>
<td>ashish#mailinator.com</td>
<td>7897897890</td>
<td>asavaliya</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
</tbody>
Want to create xpath of the only 2,3,4, and 5 TD values from each row. see below image of all the required data which i want to print using the xpath.
//tr/td[position() >= 2 and position() <= 5]

Protractor find element inside parent

I have a protractor test where I create a user and it is then added into a table of users. I then want to find the user that was created and click the edit/delete buttons. The user could be in any of the rows so I don't want to hardcode the test to a specific row just in case it's not in the specified row.
html
<tr ng-repeat="user in users | orderBy:sortType:sortReverse | filter:query track by $index">
<td class="text-center" title="{{$index + 1}}"><span class="section-index" id="index">{{$index + 1}}</span></td>
<td title="{{user.username}}">{{user.username}}</td>
<td title="{{user.email}}">{{user.email}}</td>
<td title="Role">
<span class="label" ng-class="{'admin': user.role.name == 'ROLE_ADMIN',
'user': user.role.name == 'ROLE_USER', 'trainer': user.role.name == 'ROLE_TRAINER',
'reviewer': user.role.name == 'ROLE_REVIEWER'}">
{{user.role.name | roleFilter: true}}
</span>
</td>
<td title="Created">{{user.creationDate | date:"dd MMM yyyy"}}</td>
<td class="text-center" title="Edit">
<span class="btn-details standard pull-right" ng-click="editUserClicked(user.id)">Edit</span>
</td>
<td title="Delete">
<span class="btn-details warning pull-right" ng-click="deleteUserClicked(user)">Delete</span>
</td>
</tr>
user-spec.js
var editedUserCell = element(by.css('td[title="' + EDITED_EMAIL + '"]')).getWebElement();
var deleteButton = editedUserCell.getDriver().findElement(by.css('[ng-click="deleteUserClicked(user)"]'));
Using the example from http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getDriver, it finds the first button on the page and not the one inside the parent, can anyone help?

Getting values of specific tr in table repeated through angular JS using filters

I am calling an API wich will return a json object. Based on some conditions I am getting values from this Json object and displaying them in a table which can be repeated using angular JS. Now I need to get data of each table but I don't know how as some data is filtered. Below is the table:
<table class="table">
<thead>
<tr>
<th>Relation
</th>
<th>Date Of Birth
</th>
<th >In Hospital
</th>
<th >AMB & PM
</th>
<th > Total
</th>
</tr>
</thead>
<tr ng-repeat="member in CalculatorResponse">
<td>
{{member.Relation}}
</td>
<td>{{member.dateOfBirth}}
</td>
<td>
<span ng-repeat=" InHosp in member.InHospital | filter:{strClassName: class.className}">
{{InHosp.intClassValue}}
</span>
</td>
<td >
<span ng-repeat=" OutHosp in member.OutHospital | filter:{OptionType: Option_Select.type}">
<span ng-model="AMBPMVal" ng-repeat=" Benefits in OutHosp.Benefits | filter:{intExcess: CoBenefitsSelect.type}">
{{Benefits.intAMBPM}}
</span>
</span>
</td>
<td> Total value (unable to calculate it) {{InHosp.intClassValue}} + {{Benefits.intAMBPM}}
</td>
</tr>
</table>
<input type="button" value="Generate" ng-click="Generate()"/>
So the main problem is that I am trying to get all values of the table when generate button is clicked, but I cannot get the filtered values;
I did this but it is not working:
<span ng-repeat=" OutHosp in (filteredHosp = (member.OutHospital | filter:{OptionType: Option_Select.type}))">
<span ng-repeat=" Benefits in (filteredBenefits = (OutHosp.Benefits | filter:{intExcess: CoBenefitsSelect.type}))"> {{Benefits.intAMBPM}} </span>
<%--{{filteredBenefits[0].intAMBPM}}--%> </span> <%--{{filteredHosp[0].Benefits}}--%>
--> filtered benefits and filteredHosp can be only accessed in the commented region, if you put them outside the 2 spans you will get nothing.
I am also trying also to calculate the total of In Hospital and AMB&M but I cannot as I don't know how to get their values after filter.
Any suggestion?
They are not available, not because of filter but because they are outside the scope of ng-repeat. You can either do your calculations inside ng-repeat or iterate through your list and do calculations in your controller.

ui-sref include parameter in ng-repeat loop

I have this table:
<table class="table tenant-table text-center">
<thead>
<tr>
<th class="text-center">
<i class="fa fa-per"></i> Date
</th>
<th class="text-center">
<i class="fa fa-calendar"></i> Result
</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in loanapps track by $index">
<td data-th="Date">{{v.ApplicationDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td data-th="Result">
<a ng-if="v.LoanStatus == 'Approved'" ui-sref="approved({loanid: {{v.ApplicationId}}})" class="btn dark btn-sm btn-outline sbold uppercase">
<i class="fa fa-share"></i> View
</a>
</td>
</tr>
</tbody>
</table>
I'm trying to include a parameter, the application id for the approved redirect but I'm not able to include that value in the url. Is the ui-sref approach I'm taking correct or I need to do some tweak?
Just had the same issue. Hopefully I figure out a better way to do it, but for now this will work:
approved({loanid: '{{v.ApplicationId}}'})

angularjs-disqus want to show topics comments count in top page

I am using angularjs and embedded disqus to successfully. however, I want to display the comment count of each topic comments on the top page or index page where topics are listed. like this
index/top page is listed like this
<tr ng-repeat="news_item in main_index_news track by $index">
<td class="headline_link">
<a href="{{ decodeURL(news_item.url) }}"
ng-click="ga_event(news_item)">{{ news_item.title }}</a>
<table class="post_info">
<tbody>
<tr>
<td>created_at: {{ timeToLocal(news_item.time) | date:"yyyy-MM-dd hh:mm" }}</td>
<td>rate: {{ news_item.rate }}</td>
<td>
<a ng-href="/news/{{ news_item._id }}#disqus_thread"
title="{{ news_item.title }}">
discuss
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I have followed this tutorial, but I cant get it right.
I hope I am making a sense, because I am clueless, and its my first time to use disqus and I am really amazed by it.

Resources