I dont want ng-message to keep showing until user enters valid input. So I want to hide the ng-message say after 5 seconds on showing.
I saw the class toggle from ng-active to ng-inactive.
Now how can i manually set ng-message to inactive or hide it after some seconds?
The #muller answer is solved your problem. but it's a temporary solution only. Because if you used more ng-message you need to manage all of them.
But my options is you may go to AngularJS-Toaster. AngularJS Toaster is a customized version of "toastr" non-blocking notification javascript library.
I hope You can see the demo for more clarifications .
And son't worry about the integrations. We don't need long time to integrate this. you just need to download the files from the link which I bring above (js,css) and drag the files to your main screen . That's all.
$timeout(function() {
$scope.showMessage = false;
}, 5000)
edit: to know if the message is shown you can watch the value of the condition (error) I assume (e.g. if the condition is required, watch the error object of your [input field].$error.required..)
Related
I am facing a performance issue in my angularjs application using angular material.
I have an <md-select> with many options (around 1300) and this <md-select> is in an <md-tab> tag. On the page load, my page freezes. This is probably due to Google Chrome's event passive listener, because I get the following log in my js console :
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
You can find a codepen which reproduces my issue : https://codepen.io/jjalal/pen/vWxYbv.
When switching from Harry to John the page freezes (it is way more obvious on my application). If you open the js log and set the log level to 'All levels' (enable verbose level), you can see the 3000 logs (I have 3 select with 1000 options each).
I saw on some answers that I should set the event passive to true like this :
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: true });
But this didn't solve my issue.
Any help would be appreciated.
Very recently (two days ago) had a very similar issue and after hours of research I had to realize that this is something that won't be fixed in the near future. Please refer to this question and the accepted answer for explanation. (And also check out the angularjs github issue which has a tag 'won't fix')
Regarding a kind-of solution:
The problem is 100% with the browser (don't even try it in IE, it will freeze with a note 'long running script') and the DOM rendering and not in your code. So I kept trying and trying and trying, removed tiny parts of the DOM (complete container divs, buttons, paragraphs, whatever I could find) one by one. At one point I was able to identify what caused the issue. I had an item that was draggable which contained a clickable md-icon and that icon had an on-hover md-tooltip. Now you see it had 3 events (dragging the item, clicking on the button and hovering the button) which collided. After removing the md-tooltip it worked like a charm. My suggestion is for you to start identifying what exactly could be causing this. The real solution will have to wait...
I am attempting to use $mdToast.updateTextContent() to update a toast and am unsuccessful. The docs don't go into detail on how to call it with a new message. My desire result would have the first toast display 'Adding account' then change to 'account successfully added'. Any help would be greatly appreciated.
I think the correct way to approach this using material design standards would be to only use the toast once the account has been added. The loading could be a spinner or maybe a loading bar (maybe like this http://materializecss.com/preloader.html)
Once the $mdToast is open, you're able to call updateTextContent (as you stated)
$scope.onAccountAdded = function() {
$mdToast.updateTextContent('Account successfully added')
};
We're watching the variable for changes and update the view automatically, once the value has changed.
https://github.com/angular/material/blob/master/src/components/toast/toast.js#L299
Here is a demo, which shows how it works.
http://codepen.io/DevVersion/pen/qNWewJ
I want to be able to set a keyboard shortcuts for buttons in an application I'm building. I'd like to be able to pass in the keyboard button code as a parameter to make it configurable. Here's what I have so far using the documentation before I got stuck. HTML:
<div ng-controller="BtnCtrl">
<button class="primary-btn" type="submit" ng-keypress="press($event, '12')">Button</button>
</div>
JavaScript:
angular.module('App')
.controller('BtnCtrl', function ($scope) {
$scope.press = function($event, hotKeyRef) {
if ($event.keyCode==hotKeyRef) {
//need some code here to trigger the button press
}
}
});
So using my approach, I'm unsure of a) how to trigger the button press from inside the function and b) whether this is the correct way of passing in the keyCode data.
I might also be taking completely the wrong approach, so any other guidance would be appreciated.
Thanks
For the question a).
The main uses of a < button > html element is to fire an event on a click.
So if you want to use a keypress, why use this element ? I don't really see what you want to achieve. that seems controversal.
for b) :
By default, ng-keypress is intended to be used in an input element.
Otherwise, it seems that some posts, where I inquired, manage to make it work out.
You can see what it can look like, for example on this post (Is it possible to listen for arrow keyspress using ng-keypress?)
in which the person trying to setup the konami code.
Moreover, it seems that you can have trouble depending on which browser (Chrome, Firefox, Safari, IE) you uses. Be careful.
I hope this could help you.
hi there is an excellent plugin for your scenario u can check the below link
https://github.com/chieffancypants/angular-hotkeys/
u can also check the below stackoverflow link
What is AngularJS way to create global keyboard shortcuts?
I am trying to understand how works the ui.bootstrap accordion in angularjs. In my case of use, I have three accordions of which only the first is allowed to open. The rest of them should not open when the user click on their header until an option is selected from the previous accordion.
Now, I am experimenting with a controller which shows a error message when the user click on the second and third accordeon and, after that, it close them. This is my Plunker with my code:
http://plnkr.co/edit/rSg6Az?p=preview
The part of the error message works fine but I can not get that the accordeon selected is closed when I click it.
Any idea?
Regards:
Adrian Ferreres
First I give you the thanks for your answer and my apologies for my delay to answer it. I didn't tested your solutions because I found two solutions which I like more than you told me. The first was given by Vanya Dineva in the official mail group of Angular:
Here's a couple of things you can try:
Notice the accordionGroup directive uses the collapse directive in its template (https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion->group.html )
You can modify and instead of having collapse="!isOpen" you can replace the isOpen with a new variable that you would set to false until your condition is met
Notice the ng-click="toggleOpen()" in the accordion group template (https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html ). Try creating a custom function e.g. ng-click="openIfConditionMet()" and put your logic inside the function
The second was found by myself. I add a modal window to show the error message when a user tries to open an accordion. In the function which closes the window I put the code to close the accordion:
http://plnkr.co/edit/rSg6Az?p=preview
You can use ng-class, and bind it to the value of the option in each previous accordion.
You can probaly warp your assignment to a $timeout but there is already in master the support for is-disabled. https://github.com/angular-ui/bootstrap/commit/9c43ae7c0a66ff454c97296122d8f82c89ac4d5e
You can either build it your self or wait for the next release :-)
I have a lengthy form customers will need to fill out. If they click a link on a page, it will navigate away from that Controller and they will lose any data they may have already input.
If I can determine the form has not yet been saved, how can I intercept any click to the links on the page so I can ask the user if they want to save their form first?
No code yet- sorry. Many thanks.
I've written an angularjs directive that you can apply to any form that will automatically watch for changes and message the user if they reload the page or navigate away. #see https://github.com/facultymatt/angular-unsavedChanges
Hopefully you find this directive useful!
sorry for the late answer but mabye someone stumbles upon this and finds it useful. I have encountered the same problem and at the beginning i tryed to use the ng-dirty class applyed to the form element but because i had some custom controls the ng-bind won't be applyed when i changed some fields.
The best way i found so far is to detect when the model is changed with the use of $locationChangeStart event.
$scope.$on('$locationChangeStart', function (event, next, current) {
//we are about to leave the page so it's time to see if the form was modified by the user
if (!$scope.isFormClean())
{
event.preventDefault();
}
});