CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc-4
user3310138
user3310138

Reputation: 137

how to open different -different view html pages using tab with angularjs only

I am new in angularjs.I wanted to implements tabs like tab1,tab2,tab3

three tabs is inside mainIndex.cshtml page. my three view(html) and mainIndex.cshtml are inside one folder called admin

now i wanted to perform all action using angularjs .i don't want to inline code

i have tried below code but unable to achive my senario

my 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>

my controller

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;
    }

}]);

Upvotes: 0

Views: 1021

Answers (1)

karsiwek
karsiwek

Reputation: 76

have you tried using ng-if directive?

like:

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

and so on... ?

Upvotes: 2

Related Questions