Folks,
I am trying to implement a vertical navbar in my page. This page will be rendered by Angular.
Somehow I am not able to get this to working. not sure what I am missing here.
Clicking on different tabs does not display their respective pages.
Any clues anyone can provide will be greatly appreciated.
here is a plnkr I have created for troubleshooting:
http://plnkr.co/edit/dzfv8VMWCJk8cywgy5mm
You need to dynamically set the classes of elements under nav-tabs and tab-content. The easiest way to accomplish this is to use ng-class attribute that calls a function in your controller to return appropriate class for each tab. To set the active tab, use ng-click on the nav-tabs.
Here is a working version in Plunker:
http://plnkr.co/edit/UBBq7V8mdyqllBHdwegY
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
In my AngularJS web application it is possible to create an item and save it. When the user clicks on the save button, the item is showed in the sidebar on the left.
I would like that when the item is saved, it will be highlighted for some seconds (e.g. background-color) so that the user can detect where it has been saved.
This is the button to save it.
<a class="pure-button pure-button-primary" ng-click="NewOrUpdateItem()">Save</a>
Need any other details?
any idea about this issue?
Thank you in advance.
You could use the ngAnimate module of angular. ngAnimate
see here for a working example
var module = angular.module("app", ['ngAnimate']);
....
I guess a proper answer will depend on your markup and list of items, if you could put a bin would be helpful. Anyway I have put this simple example together, maybe it could give you some ideas.
When a item is saved, $scope.saved is set to true and ngClass is used to create the highlight effect, then use $timeout to unset saved. I think a directive could be a better place for this logic.
Here is the JSBIN
Need to create nested tabs.
In a page there will be multiple Person id tabs as outer tabs and on clicking each tab it will open inner tabs like Home,Office etc., and on clicking inner tab - Home, the tab content will display.
Outertab: Person 1 Person2
Innertab: Home Office
Refering the site - http://angular-ui.github.io/bootstrap/ , created outer tabs with content. created 2 separate tabset but not able to give link between the two tabset.
Can someone help me how to write directive for nested tabs? Any reference links?
I believe that AngularUI Router is what you are looking for. The majority of UI-Router's power is in its ability to nest states & views. Follow the link I've provided and take a look at the section Nested States & Views.
This Plunker example incorporates AngularUI Router to achieve a similar functionality you are looking for.
[EDIT]
This layout composed of nested views is exactly what for the AngularUI Router is used for:
So TabsTemplate will dynamically render the first level of tabs (any number).
TabTemplate could be a template without any dynamic content as Home and Office tabs are always there.
OfficeTemplate and HomeTemplate are again templates that are populated dynamically based on the selection of the current person.
You can refer to how angular bootstrap tabset directive is written.
Reading the tab code helped me understand how directive work. Now I can build many components from the ground up.
I build myself a simpler version of the tabset directive, it doesn't render the content, just the tab-heading element. So I can decide what inside the content via a tab selected callback. And for nested tabs, I just need to put in another tabset directive.
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.
I have a select combo box when upon changing, needs to load a specific html partial/page into a div on the same page as the select. I am new to Angular, so not really sure the best way to do this. I know how to do it using jQuery, how didn't know if this could be accomplished using a Directive.
Thanks, in advance.
Solved the issue:
Using ng-include have the combo box change a url variable, i.e.
$scope.myPartialPath = "partials/template1.html".
Then have ng-include bind to the variable, i.e.
ng-include="myPartialPath"