I want to select the first item in my ng-repeat as soon the list is loaded to the user, is there an easy way to do that?
Right now im using the ng-click, but i dont know how to automatic click that first item.
This is my ng-repeat
<div ng-hide="hideMembershipSection" ng-repeat="membership in memberships" class="row">
<div class="membership-box col-lg-9 col-md-9 col-sm-9 col-xs-8">
<img class="img-responsive" ng-src="/images/onlinesalg_ny/{{ membership.image }}">
<h1 class="text-uppercase">{{ membership.titel_onlinesalg }}</h1>
<p>{{ membership.onlinesalg_produktbeskrivelse }}</p>
</div><!-- col-lg-9 -->
<div class="membership-box__price col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
<h1>
<small>Kr.</small>
{{ membership.pris }},-
</h1>
<button ng-click="selectMembership(membership)" type="button" ng-class='{"btn-success": membership.pid == success}' class="text-uppercase btn btn-primary" ng-disabled="membership.pid == success">{{ membership.pid === success ? "valgt" : "vælg"}}</button>
</div><!-- col-lg-9 -->
In the controller, after the code where you load the list into $scope.memberships, what about using the line:
selectMembership($scope.memberships[0]);
This is essentially doing what ng-click is doing, but after the list is loaded. It depends on what your selectMembership function does though.
you can use ng-init to select first element by default as in ng-init="ngModelFieldName=memberships[0]
i dont know the name of the ng-model hence gave the name ngModelFieldName
<div ng-hide="hideMembershipSection" ng-repeat="membership in memberships" ng-init="ngModelFieldName=memberships[0]" class="row">
Related
I am using Selenium and java and I cannot click on an element inside a modal.
The scenario is this:
after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.
I already tried with:
js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");
I also tried with switchTo() this way:
while (itr.hasNext()) {
String popup = itr.next();
System.out.println("itr: " + popup);
driver.switchTo().window(popup);
}
Here is the html of my modal:
<div class="modal-dialog">
<div class="modal-content modal-custom-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form id="formTo" class="form-container">
<div class="row">
...
</div>
<div class="small-space"></div>
<input ...>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="small-space"></div>
<div class="row">
...
</div>
</form>
</div>
<div class="small-space"></div>
<div class="modal-footer">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
this is the CSS Path as taken from firefox dev tool:
html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn
the object is never found.
Question 1: if an element is inside a modal has to be managed
differently?
Question 2: How to finally have the click on the button
saveexit working?
here is shared a code snippet of the html: https://codeshare.io/arLW9q
Here is the java code:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id=\"saveexit\"]")))
I have also tried with:
cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12
button#saveexit.btn.modal-button.full-btn
xpath: //*[#id="saveexit"]
Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out
As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.
As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.
To click on the SAVE AND EXIT button you can use the following code block :
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='modal-dialog']//div[#class='modal-footer']//button[#class='btn modal-button full-btn' and #id='saveexit']"))).click();
I fixed it using jquery inside my script;
here is the linecode:
js.executeScript("$('#saveexit').trigger('click');");
I hope it can help someone in future.
I dont know why plain javascript was not working...
I have a page that displays some fields from an object provided by a service using angular 2. I would like to display some of those fields only when the user hovers over some div. I thought the bootstrap popover would be ideal but I am not sure how to display those extra fields in the data-content element of the bootstrap popover. Here it is my attempt code.
div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4 col-md-4" data-toggle="tooltip" title="Name">
{{data.name}}
</div>
<div class="col-sm-2 col-lg-2 col-md-2" data-toggle="tooltip" title="A Date">
{{data.aDate | date:'shortDate'}}
</div>
<div class="col-sm-2 col-lg-2 col-md-2" data-toggle="tooltip" title="other">
{{data.other}}
</div>
<div class="col-sm-4 col-lg-4 col-md-4" data-toggle="popover" title="More data" data-content="how to display data.field1, data.field2" >
Popover test
</div>
</div>
</div>
In the popover data-content I would like to display a multiple row that would look like
field1: {{data.field1}}
field2: {{data.field2}}
I am new to both bootstrap and angular, perhaps a popover is not even the best way to display this data?
Scope value becomes empty when used inside any section which has col-md class. Please refer the plunker in comment. The scope value becomes empty when
<div style="visibility:hidden">{{item.text}}</div>
line is removed.
I'm not sure this is bug or correct fix, but you can definitely set height to vs-render to 20, does fixed the issue. Just say vs-repeat="20"
<div class="repeater-container" vs-repeat="20"
style="overflow:auto;overflow-anchor: none;">
<div ng-repeat="item in items">
<div class="col-md-12 col-xs-12 bby-padding-top-10">
<label>{{item.text}}</label>
</div>
</div>
</div>
Plunker Here
col-md-12 col-xs-12 should be child of element with class row
<div class="repeater-container row" vs-repeat style="overflow:auto;overflow-anchor: none;">
<div ng-repeat="item in items" class="col-md-12 col-xs-12 bby-padding-top-10">
<label>{{item.text}}</label>
</div>
</div>
I'm having trouble getting ng-show to work correctly when a user clicks an icon. The behaviour should be as follows: The parent div loads and shows some content. When the user clicks the play icon, the contents of the div become hidden. However, right now it doesn't seem to be working. See code below:
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe = true">
<div class="play">
<span class="icon_play" ng-click="showMe=false"></span>
</div>
</div>
This syntax is incorrect:
ng-show="showMe = true"
When evaluated, it assigns true to the field 'showMe'.
You should put instead:
ng-show="showMe"
This won't fix your problem because the field 'showMe' is not initialized to true.
So you could invert your logic:
<div class="col-sm-10 col-md-8 center-block" ng-show="!dontShowMe">
<div class="play">
<span class="icon_play" ng-click="dontShowMe=true"></span>
</div>
</div>
or initialize showMe in your controller code.
I think you want this:
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe" ng-init="showMe = true">
You're setting showMe to true instead of checking if it's set to true.
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe">
<div class="play">
<span class="icon_play" ng-click="showMe=false"></span>
</div>
</div>
You want an expression for your ng-show, not an assignment. See the doc here:
https://docs.angularjs.org/api/ng/directive/ngShow
you want something like this:
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe">
<div class="play">
<span class="icon_play" ng-click="showMe=false"></span>
</div>
</div>
http://jsfiddle.net/thomporter/tcVhN/
I need to find a better solution regarding ng-repeat, $scope variable and infinite $digest loop. I'm sure it's not $watch issue and I'm sure it's in the way I'm updating my $scope variable.
The issue doesn't happen in Chrome. It only happens in Safari and Firefox. This is how I'm doing it. I have a $scope.chartCollection which is dynamically populated with Google Chart objects. The $scope.chartCollection can have 1 or more google chart objects depending on my selection.
In my html template, I have this code,
<div ng-repeat="device in chartCollection">
<div class="col-md-6 padding10px">
<div class="widget enable-top-radius chartProperties">
<div class="widget-title enable-top-radius dark-gray-title">
<h4>
<span class="alignleft">
<i class="fa fa-circle" ng-style="{ color : device.dotColor }"></i><span class="padding5px">{{printerTypeName}}</span><span class="padding5px">|</span><span class="padding5px" popover="{{device.modelOrLocation }}" popover-trigger="mouseenter">{{ device.modelOrLocation }}</span>
</span>
</h4>
<span class="alignright">{{device.location | uppercase }}</span>
<div style="clear: both;" class="padding5px"></div>
</div>
<div class="widget-body">
<div google-chart chart="device.chart" on-select="seriesSelected(selectedItem, $index)"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding chartInfoBox">{{dateForGraph}}</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.leftCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.leftCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.middleCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.middleCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.rightCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.rightCellText"></div>
</div>
</div>
</div>
</div>
so that I can display each chart in separate divs. It works really well in Chrome but not in Firefox and Safari.
I'm getting this error in Firefox and Safari
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%5D,%5B%5D,%5B%5D,%5B%5D,%5B%5D%5D
And my situation is similar to the second example they mentioned which generates a new array. However, in my situation, it will always be a new array.
I was thinking of not using ng-repeat and use $scope.chart1, $scope.chart2 etc but the problem with this approach is that I cannot tell if there will be 1, 10 or 20 charts since everything is generated dynamically. Code will be very messy!
Update:
Here is the code that generates the chart objects
http://pastebin.com/DmQkDHjW