0

I have 4 different tabs made with angular tabs. I want to put a matching icon next to each header text in the tabs. Any idea on how this is possible?(new at angular) So far, I've only managed to statically push the same icon out 4 times, instead of different icons on each tab. I haven't found any solution from other posts yet. If I've overseen one, let me know.

My angular:

$scope.tabs = [
        { title: 'Mobilnumre', selected: function () { $scope.showAllSubscriptions(); } },
        { title: 'Medarbejdernumre', selected: function () { $scope.showEmployeeSubscriptions(); } },
        { title: 'Hovednumre', selected: function () { $scope.showPrimarySubscriptions(); } },
        { title: 'Mobilt Bredbånd', selected: function () { $scope.showDataSubscriptions(); } },
    ];

My Html:

<uib-tabset active="active">
        <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" select="tab.selected()">
            <tab-heading ng-repeat=""></tab-heading>
            <div ng-include="'MobileSubscriptionTable'"></div>
        </uib-tab>
    </uib-tabset>

1 Answer 1

0

Basically you can add another property for icon name inside your array

$scope.tabs = [
        { title: 'Mobilnumre', selected: function () { $scope.showAllSubscriptions(); icon :'NameOfIcon'} },
    ];

and bind that icon from ng-repeat.

3
  • I shoule maybe mention that it's icon from icomoon. Coming from CSS. Not sure if it has anything to say? The icon is basically just a CSS class. Nov 16, 2016 at 8:35
  • Tried your solution, I can't make it work. It just prints the icon as a string, flat html. Nov 16, 2016 at 10:09
  • basically you have to use it where your are putting hardcoded one. Nov 16, 2016 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.