How to dynamically link tabbable tabs

Question!

I'm making a little app which sorts websites by groups - where the groups appear as tabs in the tabbable navigator (twitter bootstrap). The premise is therefore, for a new tab to appear whenever you add a new group. This is what it looks like at the moment:

enter image description here

So the part where the new groups show up works perfectly (rendering them by using ng-repeat and going through all of the groups). However, when I click on them, the tabs don't show, i.e. nothing happenes. It worked when I had static tabs.

Here's the relevant html code:

<div class="tabbable tabs-left">

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">All websites</a></li>
    <li ng-repeat="group in listGroups()"><a href="#{{group.name}}">{{group.name}}</a></li>
    <li><a href="#group" data-toggle="modal">+Add group</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">
        <table class="table">
            <tr class="row">
                <th align="center">URL</th>
                <th align="center" colspan="2">Actions</th>
            </tr>
            <tr class="row" ng-repeat="item in listSites()">
                <td><font color="{{item.color}}">{{item.url}}</font></td>
                <td>Edit</td>
                <td>Delete</td>
            </tr>
        </table>
    </div>
    <div class="tab-pane" id="Social">asdf</div>
    <div class="tab-pane" ng-repeat="group in listGroups()" id="{{group.name}}">asdf</div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>

And here's my controller code:

app.factory('groups', function() {
var groups = [];
var groupsService = {};

groupsService.add = function(i_group) {
    var group = {"name": i_group}
    groups.push(group);
};
groupsService.list = function() {
    return groups;
};

return groupsService;
});

function listCtrl($scope,sites, groups) {
    $scope.listSites = sites.list;
    $scope.listGroups = groups.list;
}

To sum it up, the question is essentially - how do I link tabs that have been dynamically generated to their also dynamically generated content?



Answers

You are mixing jQuery code and Angular and that causes problems.

For one, the jQuery code binds to



This video can help you solving your question :)
By: admin