0

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

  • when i click tab1 then it will be opend view1.html

  • when i click tab2 then it will be opend view2.html

  • when i click tab3 then it will be opend view3.html

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

}]);
timgeb
  • 76,762
  • 20
  • 123
  • 145
user3310138
  • 137
  • 5
  • 20

1 Answers1

2

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... ?

karsiwek
  • 76
  • 3
  • how to render view1.html accourding your solution.i don't want to use partial page.pls suggest any other soluction – user3310138 Jun 06 '14 at 14:56
  • otherwise you could just use iframes like that: http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview (it's from http://stackoverflow.com/questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable) but partials are imho really the best and most elegant way to solve your problem :) – karsiwek Jun 07 '14 at 09:54
  • Thanks Karsiwek,could you please suggest if we go with partials then how can we use in above scenario..do you have any sample with angularjs – user3310138 Jun 09 '14 at 05:08
  • try clonning standard angular seed app from: https://github.com/angular/angular-seed - when you run it you'll see that this is tab example. If you'll have any more problems, try to share some code on http://plnkr.co/edit/ - we'll try to solve it out :] – karsiwek Jun 09 '14 at 08:15