Preparation of links in the loop - angularjs

There is an array of objects. I sort out of its loop.
In both series to get a link to the image?
vm.data.list- array of object.
Loop:
<tr ng-repeat="item in vm.data.list">
<td ng-bind="item.temp.day"></td>
<td ng-bind="vm.symbal"></td>
<td ng-bind-template="{{ item.humidity }} %"></td>
</tr>
As in the cycle of getting links to the image? (http://openweathermap.org/img/w/vm.data.list[0].weather[0].icon.png, http://openweathermap.org/img/w/vm.data.list[1].weather[0].icon.png and other)
I tried to do so:
<tr ng-repeat="item in vm.data.list">
<td ng-bind="item.temp.day"></td>
<td ng-bind="vm.symbal"></td>
<td ng-bind-template="{{ item.humidity }} %"></td>
<!-- <td img ng-src="http://openweathermap.org/img/w/{{item.weather[0].icon.png}}">-->
<td> <img src=http://openweathermap.org/img/w/{{item}}.weather[0].icon.png></td>
</tr>

you need to use ng-src instead of src: https://docs.angularjs.org/api/ng/directive/ngSrc. Angular will first compute the ng-src value and then construct the src for you.
Here is a basic example: jsfiddle:
<div ng-repeat="item in items">
<img ng-src="http://www.w3schools.com/{{item.f.folders[0]}}/{{item.name}}">
</div>
In your case, use :
<img ng-src="http://openweathermap.org/img/w{{item.weather[0].icon}}.png‌​">
Aside from the ng-src, be aware that:
an url beginning with something else than a protocol or a slash is relative: it will be resolved against the context of the current page. In your case, don't forget the http:// at the beginning !
all the angular expression inside the link should be inside the brackets: {{item}}.weather[0] won't work

Related

Ng-repeat - What is the right syntax to send the user to its dynamic id?

So, in my object index I'm working inside a ng-repeat.
Now, when I click on an object, it should go to its matching id.
How would I do this with Angular?
I got something like this now:
<tr ng-repeat="dossier in dossiers">
<td>
#{{dossier.license_plate}}
</td>
</tr>
Why don't you try ngHref directive
<tr ng-repeat="dossier in dossiers">
<td>
<a ng-href="/dossiers/{{dossier.id}}">#{{dossier.license_plate}}</a>
</td>
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
https://docs.angularjs.org/api/ng/directive/ngHref

How to perform dropdown in BMC Project using Webdriver

I am not able to automate dropdown function in my BMC project. Tried lots of options. This will help me a lot. Please help..
<div id="WIN_0_913111809" class="df arfid913111809 ardbnCustomer Char" arid="913111809" artype="Char" ardbn="Customer" arlbox="0,4,114,17" style="z-index:993;top:2px; left:12px; width:309px; height:21px;" arwindowid="0">
<label id="label913111809" class="label f9" for="x-arid_WIN_0_913111809" style="top: 4px; left: 0px; width: 114px; height: 17px;">Customer*</label>
<textarea id="arid_WIN_0_913111809" class="text sr " cols="20" maxlen="255" style="top:0px; left:119px; width:164px; height:21px;" armenu="COM:CPY:Company=Oper/Cust-Q_ForInteractionCust" mstyle="2" arautoc="2" arautocak="0" arautoctt="400" rows="1" title="" wrap="off"></textarea>
<a class="btn btn3d menu" href="javascript:" style="top:0px; left:288px; width:21px; height:21px;">
<img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Customer*" title="">
</a>
</div>​
<div class="MenuTableContainer" style="top: 20px;">
<table class="MenuTable" style="width: 386px;" cellspacing="0" cellpadding="0">
<tbody class="MenuTableBody">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<td class="MenuEntryNameHover" nowrap="">AARADHANA</td>
<td class="MenuEntryNoSubHover" arvalue="AARADHANA"></td>
</tr>
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
<tr class="MenuTableRow">
</tbody>
</table>
My screen looks like
This is not a select tag and is not designed to be one. It's an additional drop down menu element structured with tr and td tags. So using the Select class will not work.
Sample high level structure of a select tag:
<select>
<option>first option</option>
<option>second option</option>
</select
To solve your problem, You could simply use this:
driver.findElement(By.xpath("//div[#ardbn='Customer']//textarea")).clear();
driver.findElement(By.xpath("//div[#ardbn='Customer']//textarea")).sendKeys("AARADHANA");
Keep in mind that the text you are entering should be present in the menu. Entering a value that is not present in the list would result in the menu popping up and no value stored in the field, thereby throwing errors when you click on save since this is a mandatory field.
However if you do want to open the menu and choose something from there, you would have to wait for the element to appear and use one of these:
If the click needs to be performed on the tr
driver.findElement(By.xpath("//table[#class='MenuTable']//tr[td[.='AARADHANA']]")).click();
If the click needs to be performed on the td
driver.findElement(By.xpath("//table[#class='MenuTable']//tr//td[.='AARADHANA']")).click();
Be careful with this though, because
1. There may be many elements with the class 'MenuTable' that are hidden and if they are higher up in the hierarchy the script will fail.
2. If the first issue is not present and the customer you're trying to select is not visible you will have to scroll until the element is found before performing a click.
Highly recommend using the sendKeys option. Please ensure that you include code snippets to indicate what you've tried. This seems to be an issue with understanding the structure of the element in question.

ng-if is not working inside nested ng-repeat

I have nested the ligne_commandes under the commandes using ng-repeat to get only the command lines of every command and I used ng-if to verify this. My problem is that I'm getting all the command line . Here is my code:
<td ng-repeat="commande in vm.commandes track by commande.id">
<tr ng-repeat="ligne_commande in vm.ligne_commandes track by ligne_commande.id">
<div ng-if="ligne_commande.commande_id == commande.id ">
<td> {{ligne_commande.id}} </td> </div>
</tr>
</td>
Any suggestion would be appreciated

$index always 0 when using ng-bind-html

I have a directive that contains this markup
<tr ng-if="isComplete()" ng-repeat="row in paged.page() track by $index" ng-click="rowClick(row, $event)" ng-class="assignRowClass(row)">
<td ng-repeat="header in headers" ng-bind-html="trustAsHtml(header.formatter(row[header.property], row, $index))"></td>
</tr>
The problem is that $index is always 0 when passed to the header.formatter function.
try this
<tr ng-if="isComplete()" ng-repeat="(index,val) in paged.page() track by index" ng-click="rowClick(val, $event)" ng-class="assignRowClass(val)">
<td ng-repeat="header in headers" ng-bind-html="trustAsHtml(header.formatter(val[header.property], val, index))"></td>
As saw in my comment this works
$parent.$index
This is because of the new scope created by ng-if and the limit of inheritance between scope in angular (because of javascript limits).
You can either go for $parent.$index of move the ng-if to the upper DOM Element if possible (<thead> / <tbody).

ng-repeat over a div not working

I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.

Resources