Question

我是angularjs.的新手。我想实现像tab1，tab2，tab3

这样的标签

当我点击tab1然后它将是opend view1.html
当我点击tab2然后它将是opend view2.html
当我点击tab3然后它将是opend view3.html

三个选项卡位于mainIndex.cshtml页面内。我的三个视图（html）和mainIndex.cshtml位于一个名为admin

的文件夹中

现在我想使用angularjs执行所有操作。我不想内联代码

我尝试了下面的代码，但无法实现我的Senario

我的 mainIndex.cshtml

<div id="tabs"  ng-controller="AdminCtrl">


        <ul id="ul1">
            <li id="li1" ng-repeat="tab in tabs"
                ng-class="{active:isActiveTab(tab.url)}"
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
    <script type="text/ng-template" src="view1.html">

    </script>

    <script type="text/ng-template" id="view2.html">

    </script>

    <script type="text/ng-template" id="view3.html">

    </script>

我的控制器

app.controller('AdminCtrl', ['$scope', 'registerSvc', function ($scope, registerSvc) {

    $scope.tabs = [{
        title: 'tab1',
        url: 'view1.html' // here it should be opened view1.html after clicking tab1
    }, {
        title: 'tab2',
        url: 'view2.html'
    }, {
        title: 'tab3',
        url: 'view3.html'
    }];

    $scope.currentTab = 'view1.html';

    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.url;
    }

    $scope.isActiveTab = function (tabUrl) {
        return tabUrl == $scope.currentTab;
    }

}]);

Answer 1

您是否尝试过使用ng-if指令？

像：

<div ng-if="currentTab=='tab1'">
 //tab1 partial
</div>
<div ng-if="currentTab=='tab2'">
//tab2 partial
</div>

依旧......？

如何使用带有angularjs的选项卡打开不同的-different视图html页面

1 个答案: