Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.
Related
I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!
I'm using angularJs 1.3 with Angular Material Design 0.8.3 and I have a page that has a toolbar on the top <md-toolbar class="md-whiteframe-glow-z2 md-default-theme"> where I'm trying to put some icons dynamically. The page has some crud's and each crud has it own controller. The case is, each crud must have it specific icons at the toolbar, I'm trying to specify it through the controllers but I have no idea how can I write this cuz each icon should have it owns properties (the href link, the action function etc). Someone know if its possible to apply this idea (control the icons that will appears in the screen per crud via controllers)?
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
We are building an application with complicated UI.
This is the sample view of a page in the application:
Left menu will contain the list of links for the corresponding pages in the right side.
We are using ng-router for building the application.
We took the whole page as one ng-view and include the left menu as single html template.
When clicking on the links, we will replace the right side tab content by ng-include.
Inside each right side content, we have sub tabs. When clicking on sub tab, we will replace the content of sub tab.
In Left menu template controller we have few ajax calls. When loading the content of the sub tab in right side, templates are not reloaded by the angular and is cached by the angular. But the ajax calls are reloaded again.
It should not reload the ajax calls inside the left menu when changing the content of sub tab in the right content.
Somebody might have faced this issue. Please suggest me to proceed further.
You definitely should check the ui-router project from the angular-ui team.
You will find their routing and the possibility to have nested views, named views and parameters super helpful with a complex design like yours.
https://github.com/angular-ui/ui-router
Alternatives to ui-router:
http://dotjem.github.io/angular-routing/
http://angular-route-segment.com/
Without diving into pros and cons.
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)