CODEWITHSUNDEEP
angularjs
Michael Seltenreich
Michael Seltenreich

Reputation: 3508

AngularJS: Create tab links by creating the tab's content in the DOM

I'm new to AngularJS, Sorry if this is a silly question. I googled quite a lot and I can't find existing help online.

Basically, I'm trying to generate the tab headers dynamically by creating the content sections.

I have no idea how to go about it. Simply pointing me in the right direction would be a lot of help!

I want to implement in my code something like this

<div ng-show="panel[this].isSelected" ng-attr-title="JS">
    lorem ipsum...
</div>
<div ng-show="panel[this].isSelected" ng-attr-title="C#">
    lorem ipsum...
</div>
<div ng-show="panel[this].isSelected" ng-attr-title="Node">
    lorem ipsum...
</div>

And generate the tabs using ng-repeat automatically. Expected output:

JS | C# | Node

Any tips on where to begin?

Upvotes: 0

Views: 30

Answers (1)

Martin Xiao
Martin Xiao

Reputation: 41

<div ng-repeat="panel in panels" ng-class="{'selected': panel.selected}" ng-attr-title="{{panel.title}}">
    lorem ipsum...
</div>

<script>
//...
    $scope.panels = [{'title': 'JS', selected: false}, {'title': 'C#', selected: false}, {'title': 'Node', selected: true}]
//...
<script>

you probably need this, check the api doc ng-repeat and ng-class

Upvotes: 1

Related Questions