CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
SHIVANG AGARWAL
SHIVANG AGARWAL

Reputation: 53

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

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>

Upvotes: 1

Views: 3610

Answers (2)

dim0_0n
dim0_0n

Reputation: 2504

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

Upvotes: 0

Ruslan
Ruslan

Reputation: 91

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>

Upvotes: 1

Related Questions