Using angular-js 'ng-repeat' directive in nav-tabs with each tab having same html but different name and id

Question

This is a small list of nav tabs in my code, actually the list is long. So using ng-repeat would be helpful. Only problem I'm facing is that although the html for all list items is same, the name of each list item ( Mercedes, Ferrari, Red Bull, Williams) is different, and also each has a different id. So can I use ng-repeat at all? If not is there a shorter method for this, or do I have to write all the html for all the list items again and again?

 <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a role="tab" href="#merc" data-toggle="tab">Mercedes</a></li>
                    <li><a role="tab" href="#ferr" data-toggle="tab">Ferrai</a></li>
                    <li><a role="tab" href="#red" data-toggle="tab">Red Bull</a></li>
                    <li><a role="tab" href="#wil" data-toggle="tab">Williams</a></li>
 </ul>

 <div class="tab-content"  style="padding-bottom:50px; padding-top:20px">
                    <div class="tab-pane active" role="tabpanel" id="merc">
                        Some html
                    </div>
                    <div class="tab-pane active" role="tabpanel" id="ferr">
                        Some html
                    </div>
                    <div class="tab-pane active" role="tabpanel" id="wil">
                        Some html
                    </div>
 </div>

Ruslan · Accepted Answer · 2016-07-06 20:32:45Z

1

You can generate automatically a id when you click a tab.

angular.module('myApp', [])
.controller('myCtrl', function($scope) {

    $scope.cars = ["Audi", "Mercedes"];

    $scope.setTempItem = function(item) {
        $scope.currentItem = item;

    }

});

So the html should be something like this:

 <ul class="nav nav-tabs">
            <li ng-repeat="car in cars">
    <a href="#{{currentItem}}" ng-click="setTempItem(car)">{{car}}</a>
    </li>
        </ul>

    <div id="{{currentItem}}" class="tab-content">
        <div class="tab-pane active" role="tabpanel">
            {{currentItem}}
        </div>
    </div>
</div>

angular.module('myApp',[])
.controller('myCtrl',function($scope){

$scope.cars = ["Audi","Mercedes"];

$scope.setTempItem = function(item){
     $scope.currentItem= item;

}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <ul class="nav nav-tabs">
                <li ng-repeat="car in cars">
		<a href="#{{currentItem}}" ng-click="setTempItem(car)">{{car}}</a>
		</li>
            </ul>
      
        <div id="{{currentItem}}" class="tab-content">
            <div class="tab-pane active" role="tabpanel">
                {{currentItem}}
            </div>
        </div>
	</div>
</body>

</html>

answered Jul 6, 2016 at 20:32

Ruslan

911 silver badge8 bronze badges

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

2 Comments

SHIVANG AGARWAL Over a year ago

Thanks, this was what I was looking for. However, can we put one of the list items (say Mercedes) as active class, so that when the page loads, html of that item is shown, without actually clicking on the Mercedes?

Ruslan Over a year ago

Yep, you can initialize currentItem taking one item of array. Something like $scope.currentItem = $scope.cars[0];

dim0_0n · Accepted Answer · 2016-07-06 20:41:33Z

0

You can do something like this:

<div ng-repeat="car in cars" class="tab-pane active" role="tabpanel" id="{{car}}">
    Some html
</div>

Here is CodePen example: http://codepen.io/anon/pen/yJoaYx

edited Jul 6, 2016 at 20:41

answered Jul 6, 2016 at 20:13

dim0_0n

2,5045 gold badges32 silver badges46 bronze badges

3 Comments

SHIVANG AGARWAL Over a year ago

I'm not familiar with using the $index variable, how and why is it used? Could you guide me a bit over this part?

dim0_0n Over a year ago

$index is a variable which you can use inside ng-repeat directive to access the rendered element number.

dim0_0n Over a year ago

SHIVANG AGARWAL, here is a codepen without using $index: codepen.io/anon/pen/yJoaYx

Collectives™ on Stack Overflow

Using angular-js 'ng-repeat' directive in nav-tabs with each tab having same html but different name and id

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related