I am using $anchorscroller and location hash for scroll down to each section.
It is working correctly. But if any div having ng-if condition, then this anchor scroll is not working.
For example,
<div id="Mrgr" ng-if="mgrlist.length>0">
<p>test</p>
</div>
In angular, I am using the below code:
$location.hash("Mrgr");
$anchorScroll();
If I remove the ng-if then this scrolling working fine.
Any one have any solution to fix this?
Related
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
My code is as below:
<div class="gridStyle" ng-grid="gridOptions" ng-show="flag"></div>
when i set the flag to true, the grid cannot render correctly, if you press F12 on the keyboard, it can show correctly!
i also find a solution: use ng-if instead of ng-show/ng-hide, like this:
<div class="gridStyle" ng-grid="gridOptions" ng-if="flag"></div>
Using ng-if also fiexed it for me!
While I realize this question has aged, none of the solutions worked for me as of today. However, using the ui-grid-auto-resize attribute on my element worked like a charm.
<div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>
ng-grid and ui-grid don't automatically update the table when hidden or shown. By calling gridApi.core.refresh(); (for ui-grid) and gridOptions.ngGrid.buildColumns(); (for ng-grid) you force the library to rebuild the table according to the current DOM situation
I'm trying to use UI-router and ui-view to inject my content into my page. But I've stumbled across a tricky scenario that I'm not sure how to handle.
My HTML looks like this:
<div class="fixed">
<nav><\nav>
<ul class="list">
<li ng-repeat="item in items"><\li>
<\ul>
<\div>
<div ui-view><\div>
The problem I'm having is that the items in the ng-repeat don't render outside of the ui-view, and I don't want to put my ui-view inside of the .fixed div, as I'd have to close that .fixed div in every view template, and the HTML begins to get real messy at that point.
Are there any better ways to handle this?
Any help is appreciated. Thanks in advance!
I use the module angular-snap to adding a menu to my app like this:
<snap-content>
<div ui-view='header'></div><br/><br/>
<div ui-view='content'></div>
</snap-content>
<snap-drawer>
Menu
</snap-drawer>
And my ui-view (content):
<div class="content-padded">
<div class="">
<center><h4>Accueil</h4></center>
<!-- ... -->
</div>
</div>
My problem is I want to put a scrollable div inside my snap-content. And, I don't want the snap-content will become scrollable.
I have the following image to help you to understand what is my problem:
The three elements in the picture are in snap-content, but only the blue div have to scrollable.
Thank you in advance for your help and sorry for my bad English.
The solution I found is :
putting the snap-content "scrollable"
putting the divs I want outsdide the scroll "fixed"
putting a "top" and a "margin-top" in order to have the scroll under my others components.
If somebody have another method, it will be with pleasure.
I'm trying to animate between two divs when the route changes.
So far it works fine using ng-show and ngAnimate, but the second div contains the ng-view, which immediately disappears once the route changes. How do I wait until the ng-show animation completes before removing the ng-view from the DOM?
Live demo:
http://run.plnkr.co/7RLwUxwfUV4rb2kV/#/
Sample code: http://plnkr.co/edit/0ZatzKRKAyxUUfgslxum?p=preview
You are only animating ng-show in your CSS, but you're not animating when ng-view switches content. You animate ng-view with the .ng-enter and .ng-leave css classes. You can see an example here: http://dfsq.github.io/ngView-animation-effects/app/