Angular js dir-paginate with animations - angularjs

I am using dir-paginate with filtering and ordering.I want to implement animations for better UI and i cant seem to find a reference.
I am aware of http://www.nganimate.org/angularjs/ng-repeat/yo-yo-css3-keyframes-animation but this seems to work for ng-repeat not for dir-paginate.
What am i missing.
I am not using Bootstrap, instead materializecss.

Related

How to use select2 v4.03 and AngularJS together

I would like to use AngularJs and Select2 v4.03 without adding any directives. I've researched that it's possible now with the new version of select2.
For now I've been using ui-select but it's only supporting the old version of select2 and I'd like to use the new select2 features in my application.
Can anyone please help me how is it possible to use select2 with AngularJS directly (maybe via ng-model)?
Select2 is a jQuery plugin which has a completely different approach than AngularJS native widgets (in angular these are directives) which are designed to work the angular-way from the beginning. So normally it is a good idea to use native directives if you can. If you don't find a good replacement, then you also can use jQuery elements, but you have to wrap them in an angular directive to tweak them and make them work the angular-way. This is what projects like ui-select do.
So if the newer select2 is still not available on ui-select you can wait until it is implemented. Or search for another wrapper... Or, search for a native alternative. If you haven't already I would recommend you to take a look at oi-select, for example, which I find quite good and flexible.
Update
Sorry, I just checked, and the select2 implementation from ui-select is a native angularJS implementation of the jQuery version and not just a wrapper.

Angular Animation Javascript VS CSS.

I saw an animation directive that said animations are done best with javascript. Is this the case?
I am using Angular 1.3 and want a plug and play solution for animation. Can you explain the difference in the JS vs CSS question and direct me to a source to get it implemented FAST?
Backstory
I have an APP I want to launch tomorrow. I wrote it in Angular quickly but am having trouble with animations.
If you wanna animate angular directives ng-show/hide, ng-repeat, etc then css animations are the way to go. All you do is add some classes to you css file with animations and off you go as long as you have included the NgAnimate as a dependency.
If you wanna implement your own directive animations then JS is the way using $animate service.
Check out year of moo, Matias does a great job of showing them.

Auto scrolling in AngularJs

I'm trying to achieve auto scrolling with circular scrolling in AngularJS. There is a jQuery plugin which does exactly what I want.
Is there a way to achieve this using AngularJS (since many advise not to use jQuery with AngularJS)?

Highcharts with angularjs without jquery

Highcharts documentation says that it has some dependencies that can be met with jquery, prototype or mootools. Is there a way to use highcharts/highstock with angularjs without bringing in any of these other libraries?
Angular includes it's own "jqLite" which is a subset of jQuery functions that were necessary (or at least made it much easier) for Angular itself to work. Including jQuery itself will override the jQLite built in to Angular (but they should work fine together and have for me, I'm only using jQuery for ng-grid currently).
Does Angular use the jQuery library?
Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
http://docs.angularjs.org/misc/faq
I've also been looking at charting solutions that will blend well with Angular and have started playing with d3js
http://d3js.org/
Basics of D3js
http://mbostock.github.io/d3/tutorial/bar-1.html
AngularJS D3JS Directive Writing
http://briantford.com/blog/angular-d3.html
D3 essentially gives you a toolkit of functions that help to scale values to build a chart from scratch and has built in interpolation for transitions between data sets. There seem to be lots of cool examples but to build from svg or html elements into your desired chart from scratch is probably extensive work.
For something a little more pre-built and I believe without external dependencies either is Google Charts
https://developers.google.com/chart/
AngularJS Google Charts Directive
http://bouil.github.io/angular-google-chart/
Yes, there is.
Highcharts relased a Standalone version
Check it out, I think it's a more direct answer to your question than what was posted here.
Also, there's an Angular Directive for Highcharts:
Highcharts-ng by PabloJim
Also, for more info check out a similar question: Highcharts in AngularJs without jQuery?

Can't use ng-click into a ng-repeat

i'am using a popOver that show a list of bottons, those buttons have a simple ng-click that is not working. can someone help me?
here a simple example:
http://plnkr.co/edit/YfC6RxVMO3jmGguHXgXu?p=preview
You're cloning the HTML and rendering it outside of Angular, so it's not going to have any of the bindings you'd expect. Instead of using Twitter's Bootstrap directly in your Angular application, I would recommend using Angular's UI Bootstrap instead. It has its own popOver that was written to work with Angular:
http://angular-ui.github.io/bootstrap/#popover

Resources