In need a directive that does an instantaneous show (without
fade in), and when it gets hidden (ng-show='false'), does a progressive
fade out.
here is my attempt :
http://plnkr.co/edit/bEzAlwjNOsxLodnawu3s?p=preview
<span ng-show="inProgress" class="animate-fade">
<i class="glyphicon glyphicon-ok"></i>
<span ng-if="inProgress">save in progress...</span>
<span ng-if="! inProgress">saved</span>
</span>
You can create a new animation class and define .new-anim to appear, and .new-anim-remove.new-anim-remove-active class selector to animate, although this would require you to use the $animate service.
Related
Within an Angular Formly (angularjs) form - I have two spans that I want to switch on a model property condition. Whilst the search text disappears to show the spinner, it subsequently shows both momentarily before the spinner disappears.
I initially tried ng-hide and ng-show:
<span ng-hide="model.validatingRegistration">Search</span>
<i class="fa fa-spinner fa-spin" ng-show="model.validatingRegistration"></i>
I tried changing the markup to use ng-switch but even that is showing both at the same time when it transitions back to the original state.
<span ng-switch="model.validatingRegistration">
<span class="animate-switch" ng-switch-when="false">Search</span>
<i class="animate-switch fa fa-spinner fa-spin" ng-switch-when="true"></i>
</span>
I tried using css to set a transition time of 0s but maybe I'm targetting it wrong in the css, or have used the wrong markup for this to work.
.animate-switch.ng-animate {
transition-duration: 0s;
}
I also tried targetting with
[ng-switch-when] {
transition-duration: 0s;
}
Update - ng-if is producing the same transition issue where both show momentarily.
Adding:
.ng-leave {
display:none !important;
}
to my css seems to have done the trick.
I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.
Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:
ngOnInit() {
this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
}
The HTML markup looks like this:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img class="d-block img-fluid w-100" [src]="image" >
</div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.
Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.
It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.
Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}
Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.
In my application, dynamic elements are used which are basically icon/CSS selector references; for ex - save, delete, cancel buttons. These elements doesn't works with xpath's as i have tried with most of the ways. My reading is that the CSS selector will work for these elements. but i'm unable to find it out. Below is the HTML for the same.
Parent class is <div class="rTableCell ActionCell">
under this class <a> tag is used given like below
<a class="SaveRow" onclick="UpdateInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ManageDesignation')" data-toggle="tooltip" data-original-title="Save" >
under this class <i> tag is used like given below
<i class="fa fa-floppy-o themeSaveIcon"></i>
<div class="rTableCell ActionCell" style="height: 88px;"><a class="SaveRow" onclick="UpdateInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ManageDesignation')" data-toggle="tooltip" data-original-title="Save"><i class="fa fa-floppy-o themeSaveIcon"></i></a><a class="CancelRow" onclick="ResetInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ResetDesignation')" data-toggle="tooltip" data-original-title="Cancel"><i aria-hidden="true" class="fa fa-times themeCancelIcon"></i></a></div>
try action chains on selenium API
if you user python you can see this document
for example you have
xpath_element = "a xpath address"
from selenium.webdriver.common.action_chains import ActionChains
hover = ActionChains(self.driver).move_to_element(xpath_element)
hover.click().perform()
you can perform more actions on hover depending on your purpose
I use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".
I have some code to hide and show slides as follows:
<img ng-src="{{slide}}" ng-repeat="slide in slides" ng-show="$index == onSlide">
<a id="previousButton" type="button" ng-show="onSlide" class="left carousel-control" ng-click="onSlide = onSlide - 1">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="nextButton" type="button" ng-hide="onSlide == slides.length - 1" class="right carousel-control" ng-click="onSlide = onSlide + 1">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
Performance is great when using the buttons, the slides switch immediately. However, if I change scope.onSlide in the controller, there is an extreme delay in the slide switching, although a console.log reveals scope.onSlide is indeed incrementing immediately. What could be causing the lag?
Relevant controller code:
scope.$on("videoTimeChanged", function(event, time) {
if (scope.videoState == "playing") {
if (time > scope.scenario.presentation[0].syncManifest[scope.onSlide]) scope.onSlide++;
}
});
As you can see, I'm listening for a time event, which will fire every 250 ms or so, and comparing the time to the time at which the slide is supposed to change. If the current time is greater, I increment the slide. when i watch the various parts of this in console.log, it all works perfectly behind the scenes.
That probably happens because ng-repeat creates a new scope, and in ng-show you assign a primitive value instead of an object.
Try creating an object in your controller like $scope.carousel.onSlide and assign ng-show to carousel.onSlide instead.
Please do refer to carousel.onSlide inside all ng-clicks as well.
a classic: https://egghead.io/lessons/angularjs-the-dot