Question

如何在同一页面中显示标签选择结果？

我在页面中堆叠了3个选项卡，生成的html页面加载到新页面中，而不是加载到同一页面中。

我按照下面的样本及其正常工作直到其解释的部分。 https://codepen.io/jasoncluck/pen/iDcbh

我在锚标记的href属性中提到了我的URL路径。例如：

<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
    <li ng-class="{'active': view_tab == 'tab1'}">
        <a class="btn-lg" ng-click="changeTab('tab1')" href="/tabl">Tab1</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab2'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="/tab2">Tab2</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab3'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="/tab3"> Tab3 </a>
    </li>
</ul>

以下是我的路由器部分

    .when('/tabl', {
        controller : 'URLController',
        templateUrl : './views/URL.html'
    })

我可以看到我的控制器和templateURL已加载但在不同的页面中。如果href不可能那么请分享我的想法。

Answer 1

(function () {
    var app = angular.module('myApp', []);

    app.controller('TabController', function () {
        this.tab = 1;

        this.setTab = function (tabId) {
            this.tab = tabId;
        };

        this.isSet = function (tabId) {
            return this.tab === tabId;
        };
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" ng-app="myApp">
<br/><br/><br/>
<h1 align="center">AngularJs Tab Example</h1>
    <section ng-controller="TabController as tab">
        <ul class="nav nav-pills">
            <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li>
            <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
            <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
			 <li ng-class="{active:tab.isSet(4)}"><a href ng-click="tab.setTab(4)">Tab 4</a></li>
			 <li ng-class="{active:tab.isSet(5)}"><a href ng-click="tab.setTab(5)">Tab 5</a></li>
			 <li ng-class="{active:tab.isSet(6)}"><a href ng-click="tab.setTab(6)">Tab 6</a></li>
			 <li ng-class="{active:tab.isSet(7)}"><a href ng-click="tab.setTab(7)">Tab 7</a></li>
			  <li ng-class="{active:tab.isSet(8)}"><a href ng-click="tab.setTab(8)">Tab 8</a></li>
        </ul>
        <hr>
        <div ng-show="tab.isSet(1)">
             <h4>Tab 1</h4>
			 <h6> Description of Tab 1</h6>
        </div>
        <div ng-show="tab.isSet(2)">
             <h4>Tab 2</h4>
			 <h6> Description of Tab 2</h6>
        </div>
        <div ng-show="tab.isSet(3)">
             <h4>Tab 3</h4>
			 <h6> Description of Tab 3</h6>
        </div>
		 <div ng-show="tab.isSet(4)">
             <h4>Tab 4</h4>
			 <h6> Description of Tab 4</h6>
        </div>
		 <div ng-show="tab.isSet(5)">
             <h4>Tab 5</h4>
			 <h6> Description of Tab 5</h6>
        </div>
		 <div ng-show="tab.isSet(6)">
             <h4>Tab 6</h4>
			 <h6> Description of Tab 6</h6>
        </div>
		 <div ng-show="tab.isSet(7)">
             <h4>Tab 7</h4>
			 <h6> Description of Tab 7</h6>
        </div>
		 <div ng-show="tab.isSet(8)">
             <h4>Tab 8</h4>
			 <h6> Description of Tab 8</h6>
        </div>
    </section>
</div>

Demo Tab

Answer 2

<div ui-view></div>是救援人员......

这将在父状态模板中呈现子状态。

角度选项卡选择打开新页面而不是在同一页面中打开

2 个答案: