I want to synchronize the movement of an angular bootstrap directive carousel with an animation of another image.
i.e. when the carousel switches to show the 5th slide, I want to show the 5th image from some array.
I am guessing that the "angular way" to do something like this would be to bind the current index of the slide to some common "upper in the hierarchy" scope and then create a directive that will show the Nth image from my second data source.
but It just does not seem as if the carousel controller is exposing this information...
how do I "extract/bind to" the index of the current slide?
you can just use {{$index}} within the scope of your slides to access the active slide index
Related
I'm new to Angular Material and just found out about the md-tabs directive. I was wondering whether there is an easy way to insert a non-md-tab element to sit on the left (or right) of all md-tab elements, but below the tabs header.
Mockup of what I am looking for:
I guess I could just duplicate the markup and insert it into every single tab, but that doesn't seem to be a very practical solution. In any case, just adding a non-md-tab element as first child of md-tabs did not work.
Edit: another solution I thought about would be to manually load tab content based on which element is selected in the header area - I know how to do that - but then I'd lose the smooth transition animation between tabs.
I'd use a directive for that, since you have to include it into your every tab's content. It would simply do the trick.
Or you can use only md-tabs without placing every tab's content into md-tab. Make use of md-selected of md-tabs and activate your html node visibilities in the right way. In this case you can have something on the left, since you'll define the layout.
Is there a method to collapse/expand angular-strap's collapse element in controller?
I want to collapse a bs-collapse element when its content is clicked. For that I need to control the state of a bs-collapse element. I expect a $collapse service like bs-modal has, however angular-strap does not provide that.
Plunker
This plunker shows an array displayed as a list using ng-repeat
Each array item has an up and down button allowing it to to change position with the array item above or below.
I'm also using angular-animateto flash each item red when it's position is changed.
But what I'd like to do is flash red the item moving up and and flash blue the item moving down.
Any suggestions welcome
I'm not an expert at angularJS, but, I do have an idea:
http://jptacek.com/2015/03/angularJS-CSS-Animation/
There are five AngularJS events
enter - DOM element is add to the DOM tree
leave - DOM element is removed from the DOM tree
move - DOM element is moved within the DOM tree
addClass - A class is added to an element
removeClass - A class is removed from an element
So, although "move" is only working on the button you are clicking, you can change your javascript to add a class to the other elements that you swap with and move.
Then you can trigger the CSS animation by using something in your css following the
[class]-[event]-[state]
model, where it can be like
.ng-addClass { ... }
.ng-addClass-active { ... }
I had an app that I got 80% through building a few weeks back and it uses a lot of jQuery to do animations. I stopped working on that and started rebuilding it from scratch using AngularJS.
I'm now at the point where I'd like to try to add some of the animations that I WAS using in the old app. When leaving from the "main page" to the "details page", I used to have one div go flying offscreen to the left, while the main table seemed to shrink upwards and sort of "merge with" a drop-down box that was coming into view for that new details page. (The table and the drop-down have essentially the same information, which is why the animation made sense. The drop-down allows them to jump from record to record, without having to go back to the main table to navigate.)
Anyways, the way I built this app in Angular is that it is working off of one index file with a single "ng-view" div in it. And then the router determines what template-page to pull in.
I see from the various tutorials out there on animating with AngularJS 1.2 that the "ng-view" fires off events that can be harnessed for animation. But that's ONLY if you're going to add your .css class to be animated to the div that holds the "ng-view".
<div class='whatever' ng-view>
and then your css would contain something like:
.whatever.ng-enter{
opacity: 0;
}
But what can I do if I want to animate the way various PIECES of a view template enter or leave the view? (Most are just divs that act as containers for small tables of data [ as divs, not tables].) I'm using "ng-repeat" in those templates to populate the tables, but I really don't want to animate any of the rows. That's about the only other directive that fires Angular's animation that I'm currently using in the templates.
You can set animations to different parts of your template in it's controller using Jquery itself.
myApp.controller('sampleController', function($scope, $timeout, $location){
$("#submit_button").click(function(){
$("#yourdiv").fadeOut();
$timeout(function() { $location.path('/newurl'); }, 3000);
});
});
Display all your animations then change the route. I have used $timeout so as to set a delay for displaying the animations.
Can it be right, that angular ng-repeat animations, do not trigger inside views?
I've extended some examples from this article: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
When the view change, the repeat animation is not fired. I'm expecting the repeat ng-enter to fire when the view loads — it's the 1-10 list, which should animate in from the left.
http://plnkr.co/edit/8e9RqoaKnJZf5QovoBrU?p=preview
But in this example (just copy/pasted to the view on the above link) it does:
http://plnkr.co/edit/HytaDZ0nXbGLmks9eLUx?p=preview