Angular material conflict with dirPagination - angularjs

I am using the dirPagination(angular plugin) and the angular material library in one of my projects.
Description of issue: Including the angular material library cases the pagination directive to pause while switching the records from one page to another
Steps to reproduce: create a simple page and include the angular material library and the module in you app using the dirPagination,now switch across the pages
Expected result: There should not be any delay in displaying the records.
Actual result: It shows all the records at once an then hide the records not required to be shown.
Link for plunker

Related

Angular material form input box styling not displaying properly

I came accross a form wizard by Afrad on github material-wizard and will like to implement it because of its angular-material properties. The downside is that the text-boxes turn out totally different from the angular styling. Is there a way to fix this? what causes this and how do you go about the fix. I have tried using ngWizard as well and face the same issue. the forms display okay without being encapsulated in the wizard directive.
A link to a plunker showing the demo is on the github page. Attached below is a snapshot of the plunker.

Getting issue when implementing angular grid in mvc

I have one MVC project where previously i used kendo controller all the things are fine there.
Now when i added angularjs ui grid in my new and used kendo datepicker so angular js was not working because of i added those angular.js script in _layout.cshtml page just after kendo.all.min.js. but did not find angularjs worked. so i removed the script from there and added those script in newly created view so angular grid is working now but the new issue i got that is Jquery function not defined for kendo datepicker. i know this issue becasue jquery.min.js it is used now in two places first in layout.cshtml and second in new view. if i remove this jquery.min.js script from new view gettting issue like angularjs injecterr. if i am using this view my kendo datepicker is not working.
If anyone who have idea to set all the angularjs script in _layout.cshtml only then it would be good.
Need help.
One more layout used in application name as MyLayout.cshtml i added those script there and removed the same from Layout.cshtml page and now angular and kendo controls both are working fine without any issue.

Menu MDL not working in templates angularJs

Please look at the two link's below:
Example Success
Example Failed
Note that one of the link's does not display the menu icon.I need help to know what need to load the Material Design Lite to initialize the application.

Implement accordion view for mobile break point grid for bootstrap and angularjs based application

I am using Angularjs and bootstrap for my application. I have multiple sections in my page and each sections has multiple columns. I have used bootstrap grid to show the list of items for tablet and desktops ranges and used "row" for each of my sections and then col- class. Due to default bootstrap grid css, it shows one column display at mobile breakpoints for each sections.
However we want only at mobile breakpoint it should display work as accordion control.
I don't want to use css to hide the markup for tablets and desktop and show mobile markup for accordion. I want to use same markup for all of my breakpoints.
I have gone through the bootstrap accordion control also angular-ui project accordion control, however both require new HTML markup.
How can I use same bootstrap grid based markup to show accordion control at mobile breakpoints. Please also note; I tried to use ":target" css properties however it doesn't seems working fine with angular.
Please also note; I am using single page application and HTML5(true) router.
Please advice.
I was looking and found blog by Mary Lou which seems good solution to implement accordion using css only.
Accordion using CSS Only

Angularjs Detect Link In TextArea & Preview

Are there any angular modules to detect a link in a textarea and then display the link in a preview area such as a div?
I have found a jquery approach here https://github.com/stephan-fischer/jQuery-LiveUrl but I'm interested in Angular.
You can try Embed.ly module to do that (https://github.com/lithiumtech/angular-embedly). But for free its limit Up to 5,000 URLs per Month.

Resources