How to do when to click on an item from a menu the tab receive the corresponding view in angularJS?

Navigation
2

Well guys I'm starting to study angularjs, and in my application I wanted to do something like this.

I have a dropdown menu and I also have some tabs that I created manually. When I clicked on a menu item I wanted to make this tab receive the view but I'm not getting it. The maximum I did was when I clicked the tab change the corresponding content using the routes. 

<div class="btn-group">
    <button type="button" class="btn btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#create">Action</a></li>
        <li><a href="#list">Another action</a></li>
        <li><a href="#list">Something else here</a></li>
    </ul>
</div>
<div class="container" ng-init="tab=1">
    <ul class="tabs-nav">
        <li><a ng-click="tab=1" href="#edit" ng-class="{'active' : tab==1}">Aba 1</a></li>
        <li><a ng-click="tab=2" href="#list" ng-class="{'active' : tab==2}">Aba 2</a></li>
        <li><a ng-click="tab=3" href="#create" ng-class="{'active' : tab==3}">Aba 2</a></li>
    </ul>
    <div class="tabs-container">
        <div class="tab-content" ng-show="tab == 1">
            <div ui-view="main"></div>
        </div>
        <div class="tab-content" ng-show="tab == 2">
            <div ui-view="main"></div>
        </div>
        <div class="tab-content" ng-show="tab == 3">
            <div ui-view="main"></div>
        </div>
    </div>
</div>

It's a basic example but what I'm doing is the following, I have tabs and in those tabs when I click on them they load the contents until ok. But what I wanted was when I clicked on the menu link one of the tabs received the view that I would configure. As I mentioned earlier I am using the routes to change by clicking on the tabs just wanted to do through the menu I am not able to link the menu with the tabs. If anyone has a solution for this, thank you.

    
asked by anonymous 17.11.2015 / 13:03

2 answers

1

The solution using the router could be as follows: 

.state('tab', {
    abstract: true, //não permite acessar diretamente esse view, deve ser um child
    views: {
        "tab": {
            controller: 'MeuCtrl',
            templateUrl: "seu/caminho/arquivo.html"
        }
    }
})
    .state('edit', {
        parent: 'tab',
        url: '/Tab1',
        views: {
            'main': {
                templateUrl: templateUrl: "seu/caminho/edit.html"
            }
        }
    })
    .state('list', {
        parent: 'tab',
        url: '/Tab1',
        views: {
            'main': {
                templateUrl: templateUrl: "seu/caminho/list.html"
            }
        }
    })
    .state('create', {
        parent: 'tab',
        url: '/Tab1',
        views: {
            'main': {
                templateUrl: templateUrl: "seu/caminho/create.html"
            }
        }
    })

And in your html: 

<ul class="tabs-nav">
    <li><a ng-click="tab=1" ui-sref="edit" ng-class="{'active' : tab==1}">Aba 1</a></li>
    <li><a ng-click="tab=2" ui-sref="list" ng-class="{'active' : tab==2}">Aba 2</a></li>
    <li><a ng-click="tab=3" ui-sref="create" ng-class="{'active' : tab==3}">Aba 2</a></li>
</ul>

Notice that the state tab has abstract true, that is, it can never be accessed directly, you must access one of the "state child".

Ps: view tab would be to contain all the html that is in your question. Or if you already use the main view for this, just create a secondary view to use only for the tabs. If you do this, be sure to change the view of the childs in the route as well.

If you want to use directly in the html, without the route, it is also possible, just use the li without the href property, and add a direct ng-include in the template. Note that it must have double and single quotation marks. 

<div class="tabs-container">
    <div class="tab-content" ng-show="tab == 1">
        <div ng-include="'seu/caminho/arquivo1.html'"></div>
    </div>
    <div class="tab-content" ng-show="tab == 2">
        <div ng-include="'seu/caminho/arquivo2.html'"></div>
    </div>
    <div class="tab-content" ng-show="tab == 3">
        <div ng-include="'seu/caminho/arquivo3.html'"></div>
    </div>
</div>

Alternative to ng-include: 

<ng-include src="'seu/caminho/arquivo3.html'"></ng-include>
    
17.11.2015 / 14:20
1

Do more or less like this and see if it works: 

var angularApp = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute']);

var url = window.location.href;
var levels = url.split('/');

if (levels[4] == 'edit' || levels[4] == 'list' || levels[4] == 'create') {
    angularApp.config([
                         '$routeProvider',
                         function ($routeProvider) {
                            $routeProvider
                            .when("/", {templateUrl: "/template/sua_template1.html",acao_1:" active"})
                            .when("/home", {templateUrl: "/template/sua_template2.html",acao_2:" active"})
                            .otherwise({redirectTo: '/home/'});
                         }
                     ]);

}
    
17.11.2015 / 14:32
Save some elements of a struct array in another struct array Format string qt html charset