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 :-)
Related
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 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..)
I want to display the contents from my model in a div which is contenteditable. User will modify this content and it should get saved in my model. I have used the example provided at https://docs.angularjs.org/api/ng/type/ngModel.NgModelController.
The code is available at http://plnkr.co/edit/ruKtNfDWP17npbFU4Te9?p=info
var app = angular.module('docApp', []);
The issue is:
ng-model attribute does not output the data in the div as it does in the input control. Therefore I have to use binding expression.
Because of that editing goes beserk.
How do I get it right?
Thanks.
In my experience contenteditable is extremely tricky for angular to deal with. See this issue on github (which has been open for over 3 years) for a lengthy discussion. You may want to try some third party modules such as akatov/angular-contenteditable.
I am trying to build a set of dynamic tabsets with dynamic content,
http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl?p=preview
1) Clicking on Dashboard opens a new tab with directive
When I provide the content of a as the directive, this gets rendered as a string.
I've tried to use the html bind unsafe and $compile functions to make this run as an Angular component - but haven't be able to
2) Click on menu [Project Management-> Project] shows a list of Sites, on clicking of which I need to open another tab passing a parameter (Proj-ID or Site-Id)
The idea is to call a function on click of the Site Name, I'll open a new tab with content as a directive
But since I am stuck with the previous problem, I am not able to do this
Is this the right way of passing params to the directive.
Right now, the plunkr tries to o/p the tab content as a file, a string and compile - with no success
[I've revised this question with relevant details from a prev question]
SOLUTION FOUND FOR #1:
For some reason ng-bind-html-unsafe doesn't work with Angular Elements.
I had to do create a compile directive http://docs.angularjs.org/api/ng.$compile, based on info I found here on STO
In tabs-directive.html, you can definitely use ngBindHtmlUnsafe. Make sure don't put {{}} around the variable.
String: <div ng-bind-html-unsafe="tab.content"></div>
I am trying to have angular validation on my page.
I have a plunkr here that shows a normal select that behaves the way you would expect. It starts off not selected, when you select an option and then go back to the blank option, the error shows up:
http://plnkr.co/edit/SEgsPRaRCjVnpV0PGxJf?p=preview
However, if I change that to a ui-select2, it automatically makes it dirty and shows the error message on load. Any thoughts on a workaround for this? thanks in advance!
This is a known problem with angular-ui and select2.
Seems like it has been resolved, but I never got it working.
In my case I just moved to chosen.js.
I found this post and after some small changes I ended up with the following directive:
https://gist.github.com/royts/5894780
It is working great and not marking the form as dirty after initialization , and it looks better (you can still see the chosen options but they are great, line wrapping looks better).