I’m very impressed with Josh's answer about ‘angular way’ and declarative style in client-side.
But can you help me to understand, how to do that:
I have a single-page app with the menubar in the left side, and div container on the right-side.
When user clicking the menu item in the left menubar, on the right side I must to open the new tab with some grid,like this:
In angular I realized the <grid> directive.
When user click menuitem, I must add dynamically this grid directive with params on the right side.
What is the angular way for doing this functionality?
Update:
I found article about dynamic tabs, and this is example how I use it in my case
Since you asked a general question, let me give you a general answer. It should be helpful :)
AngularJS is model/data driven, and if you want to make any change to the UI, the first thing you may think is how to achieve it by changing data. Given this idea, we can implement it like this:
Define a ng-repeater, which should render tabs for a list of Tab objects called MyTabs, for instance.
When you want to add a new tab, then create a tab object and add/push it to MyTabs.
AngularJS will magically render it on the UI, thanks to the 2-way data binding.
Related
I have a problem with a custom directive that I wrote to simulate a tab view in angular.
This directive has only a method to redirect from a state to another.
This directive works fine.
The template of the directive is a div with a uib-tabset and some tabs that contain the views to show them.
This works fine.
Now I need this feature: from a view in a tab, I need to change view with a state.go(view) and I must also go to the tab which contains that view.
I tried different solutions that I found here or in other forums, but probably my requested feature is different from others.
Thank you.
I resolved with the answer in this link.
Sorry for my repost.
Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
going beyond basics
To make it easier for people to understand what I am trying to do I made a simple plunker with a few components namely; cList, cListItem, cAddItem, cEditItem, cPanel.
The Controller passes an array of items (that it magically received from our data store) to cList component, which in turn renders each item.
Add New Item button supposed to initialise cPanel component when clicked and destroy? itself when the panel is closed or new item is created successfully.
Each item has an edit button which will initialise a panel with the item to edit. And just like Add New Item it should destroy itself when the panel is closed or item is updated successfully.
Simple CRUD, nothing fancy.
problems
I don't quite understand how I should invoke the panels in the first place.
If panels should be invoked from the Controller.
If it is possible to initialise and destroy panels on the fly.
If I should break cAddItem and cEditItem into separate modules instead (make it easier to handle display of panels?).
If my implementation of cPanel component qualifies it as a reusable component.
Could you help me develop my example to a working prototype, please?
resources
Angular Components
Components by Todd Motto
$onInit and require by Todd Motto
ps
I am using AngularJS 1.5.8
How would one go about animating Angular UI Pagination?
I have made an example here, using jQuery animations, but I'm not too satisfied with it, and had no luck from SO for now...
Any insight or feedback is welcome.
EDIT:
Animation example: When user clicks the Next button, displayed items fly out to the left, and new items fly in from the right. Analogously for Prev button, items fly out to the right, new items fly in from the left.
In case you need to animate your existing items to left & new items from right you actually don't need to write any javascript code. You can do it using plain css & angular animation of ng-repeat. Read about animation attached with ng-repeat.
Or there is an awesome site you can use to generate various animation, simply use that. http://www.nganimate.org/angularjs/ng-repeat/move
Hope this helps!
Thanks,
SA
I'm stuck with Angular. I have a directive that shows a list and when the user hovers over an item, I want to show a preview of the item, with the preview being given by the directive user.
Some tricks though... I want the user to be able to filter the list using an input [which is easy on it's own] and there is some basic styling surrounding the list that I would like the directive to handle, like adding the checkboxes that well be watched to create the model for the directive.
I want the directive user to simply be able to write:
<preview-list list='unfilteredlist'>
<div>
<h1><blink>{{title}}</blink></h1>
<h2><marquee>{{html extrodinaire}}</marquee></h2>
</div>
</preview-list>
I tried using ng-transclude, but it uses a sibling scope and I've been looking for work arounds and I can't find any. The only ones I found involved writing the entire template in javascript, which honestly I can't believe people think that's an acceptable solution.
Any solutions, or is this actually completely impossible in Angular?
As i see it you have two options :
Create a preview box for each member in your list and toggle visibility on hover. This is great if you have only a few values and the preview box is heavy.
Create a transcluded directive in which - the main scope will hold the list and the currently hover element. The sibling scope will hold the preview container. Once the selected value changes the preview box will update (according to your bindings) and only thing left to do is position it.
transclude is hard at first but it pays off.
Hope this helps.
Hi friends i am using jdev 11g release2 (11.1.2.4.0).I want to create a registration form from dragging datas from data control and my question was how to change or move the position of textfield in that form into different areas?
You should be using various layout components to achieve the layout you want, and remember that layout components can be nested to create more complex layouts.
See some examples here:
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutForm.jspx
You can use the view source menu to see how they achieved that.
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutBasics.jspx
Please be a bit more clear in your query. From what I was able to make out:
You can either use the "code view" of the JDev to move the code which represents the component to a different location or use the "Design view" to drag and move the component.
I would recommend the first approach as it makes it easier to manage the code/layout
You can change the position of the fields within the form or you can drag them out. However for this you should try out some tests and see which suits you best. I think if you surround each attribute with "Panel label and message" you will have a better view of your page.