How to create a closeable tab in angularjs UI-Bootstrap

Question

I want to create closeable tabs (like chrome tab or firefox tab, which has a small "x" on every tab). How to configure the ready-made tab component in UI-Bootstrap to add this functionality?

Thanks.

Believe this is a bit too broad, also you should show what you're working with specifically (links/code) and show what you have tried. — shaunhusain
– shaunhusain, Commented Jul 9, 2013 at 15:44
I am trying to find if there's a ready-made library for this or any configuration for this. Jumping into coding before searching for existing stuff isn't a good practice. — janetsmith
– janetsmith, Commented Jul 9, 2013 at 21:36
True but coming to SO without doing research yourself isn't good practice either. stackoverflow.com/questions/how-to-ask Notice the first step is research. I get you in that I like to look before I start building everything under the sun, but SO is for guided help from A to B. Are you trying to use AngularUI as a starting point or some other code built on Angular? Do you have tab code and can't figure out the close part? Drop links make it easier for people to give an answer and you're more likely to get one. — shaunhusain
– shaunhusain, Commented Jul 9, 2013 at 21:43
In particular with Angular related questions it seems most people now will include a jsfiddle or something like that so everyone can test, still post the code too though in case js fiddle goes away or has issues. Also not saying you did no research, but it's hard from an "answerer" point of view to pick this up and answer it without doing my/our own research. — shaunhusain
– shaunhusain, Commented Jul 9, 2013 at 21:45

Rob Watts · Accepted Answer · 2014-05-02 16:19:28Z

25

you can use html & ng-click in your tab-heading, e.g.

<div ng-controller="mainCtrl">
    <tabset>
        <tab ng-repeat="t in tabs">
            <tab-heading>{{t.title}} <a ng-click="removeTab($index)" href=''><i class="icon-remove"></i></a></tab-heading>
            <div ng-bind-html-unsafe='t.content'></div>
        </tab>
    </tabset>
</div>


angular.module('myApp', ['ui.bootstrap']).controller("mainCtrl", function ($scope) {
    $scope.tabs = [{        
        title: "one",
        content: '<h1>tab one</h1>'
    }, {
        title: "two",
        content: '<h1>tab two</h1>'
    }, {
        title: "three",
        content: '<h1>tab three</h1>'
    }];
    $scope.removeTab = function (index) {
        $scope.tabs.splice(index, 1);
    };
});

JSFiddle: http://jsfiddle.net/alfrescian/ZE9cE/

edited May 2, 2014 at 16:19

Rob Watts

7,1563 gold badges42 silver badges60 bronze badges

answered Jul 15, 2013 at 11:30

alfrescian

4,0791 gold badge20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

janetsmith Over a year ago

Thanks! Exactly what I want.

kentor Over a year ago

Not sure if that's valid HTML because that a tag will be nested under another a tag generated by the tab directive.

Collectives™ on Stack Overflow

How to create a closeable tab in angularjs UI-Bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related