CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
user4043491
user4043491

Reputation:

Angular Bootstrap Tabs , href doesn't work

I'm trying to use angular bootstrap tabs like that :

    <div >
    <tabset>
        <tab ng-repeat="t in tabs">
            <tab-heading>{{t.title}} <a  ng-click="removeTab($index)" href='#Evaluation'><i class="glyphicon glyphicon-remove-sign"></i></a></tab-heading>
            <!-- <div ng-bind='t.content'></div> -->
        </tab>
    </tabset>
</div>
<div id="Informations">Infos</div>
<div id="Evaluation">Evaluation</div>

and the js is :

monAppli.controller("Controleur", function ($scope) {
    $scope.tabs = [{        
        title: "Informations",
        content: '<h1>tab one</h1>'
    }, {
        title: "Evaluation",
        content: '<h1>tab two</h1>'
    }, {
        title: "Projets",
        content: '<h1>tab three</h1>'
    }, {
        title: "Notes",
        content: '<h1>tab 4</h1>'
    }
    ];
    $scope.removeTab = function (index) {
        $scope.tabs.splice(index, 1);
    }; 
});

but the href link doesn't work, it doesn't show each div separatly.. Somebody have any idea ? Thank you a lot It's supposed to show thez div "Evaluation" when clicking on a tab, but it show nothing.

I've tried this also :

<div >
        <tabset>
            <tab ng-repeat="t in tabs">
                <tab-heading>{{t.title}} <a  ng-click="removeTab($index)" data-target="#{{t.title}}"><i class="glyphicon glyphicon-remove-sign"></i></a></tab-heading>
                <!-- <div ng-bind='t.content'></div> -->
            </tab>
        </tabset>
    </div>
    <div id="Informations">Infos bla bla bla</div>
    <div id="Evaluation">try bla bla bla</div>

There is a fiddle there http://jsfiddle.net/alfrescian/ZE9cE/

But it doesn't show how to show one div related to one tab.

Upvotes: 2

Views: 3646

Answers (1)

Ted
Ted

Reputation: 14927

Change href='#Evaluation' to data-target='#Evaluation' (remove the href altogether).

Upvotes: 5

Related Questions