It seems the collapse expression is not being triggered inside a closed accordion.
ng-hide however does work which is lacking the pretty animation of course.
I made this plunker to show this.
The radio buttons on top determine whether the box "collapse something" inside the accordion. If you open an accordion tab you can toggle it with the radio buttons. However if you have the accordion closed and select "yes" and open the accordion then, the ng-hide expression will have been triggered but not the collapse one.
<div data-collapse=" test != 'yes' ">
collapse something
</div>
Above will not show where's below will:
<div data-ng-hide=" test != 'yes' ">
show something
</div>
Now I guess this might have something to do with the accordion using collapse to show the accordion body...
I might have to go and create a collapse clone with animations if there is nothing else I can do.
Any ideas are appreciated.
I think you are dealing with a general bootstrap issue. If you toggle collapse on something with 0 height you result in an inline style of 0px;
<div data-collapse=" test != 'yes' " class="ng-binding collapsing" style="height: 0px;">
Related
I'm trying to create a md-menu inside of a md-toolbar and have it open on click. My code for the button that would open the dropdown menu is below:
<md-button aria-label="Open menu" class="md-icon-button" ng-show="(data.isAdmin || getUIActions('context').length > 0) && options.omitHeaderOptions != 'true'" ng-click="$mdMenu.open()">
<md-icon md-menu-origin id="adminMenu">menu</md-icon>
</md-button>
I have two questions --
1) In a previous iteration of this code, I had ng-if on my md-button. With ng-if, the dropdown menu was always open and could not be closed. When I switched to ng-show or took out the condition completely, the menu is gone. Is there a reason why ng-show works and ng-if doesn't?
2) I copied the code for ng-click directly from the angular material documentation, but cannot seem to get the click to open up the menu. Am I missing something?
I was using v.1.1.0 when I encountered this issue. Once I updated to v.1.1.5, the problem got fixed.
I am following the sample code as per this link:
http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal
The plunker sample here:
http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview
I tried to define a custom template customModal.html using windowTemplateUrl to add a close button (top-right) to the modal box, but the modal dialog won't show properly and I see only dark background and the modal is kind dimmed. Also, the buttons are not responding.
Appreciate if someone could help me define such custom template to allow using close button for all similar modal dialog boxes.
Update: I want to explain why this is not a possible duplicate of this question as suggested. The other question is dealing with "Why we get error when we open the dialog when we specify the template only". In this question, I the template is not showing proper even though I followed the instruction to implement it.
Tarek
in your script template add
<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>Title</h4>
</div>
I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.
Within each md-menu-item I have md-select inputs. It looks like this:
...
<md-menu-item>
<md-input-container>
<label>My Label</label>
<md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
<md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
{{foo.name}}
</md-option>
</md-select>
</md-input-container>
</md-menu-item>
...
If I open the menu via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.
If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.
Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?
Here is a codepen example of what I am seeing.
Thank you for any suggestions!
To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.
$(document).bind('click', function (event) {
$mdSelect.hide();
});
The problem here is with menu and select backdrops which are used to close corresponding elements, when clicked out. So it's angular material thing. You can change z-index of these backdrops. Defaults are specified in variables.scss file (as you can see menu's backdrop is above select's, so you close it first):
$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;
That's the only quick fix I see (you can change z-index for these backdrops just in your css).
Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).
My codes lookes like this:
<div class="arrow" ng-click="list.push(list.shift())>←</div>
<div class="ribbon">
<div class="ribbonItem" ng-repeat="item in list">
{{ item.Name }}
</div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>→</div>
This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").
Has someone an idea?
Thanks.
Similar question : how to use animation with ng-repeat in angularjs
Go through this link it might help you:
http://www.nganimate.org/angularjs/ng-repeat/move
I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:
When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.
I'm looking for this functionality:
Clicking anywhere except the menu should close the menu, not toggle it.
How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.
This actually fairly simple to solve with a little extra CSS and an added div.
Plunker Demo
The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.
The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:
MARKUP:
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.
Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.
You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.