nav-tabsでangular-js 'ng-repeat'ディレクティブを使用すると、各タブは同じHTMLを持ちますが、異なる名前とIDを持ちます

これは私のコードではnav tabsという小さなリストです。したがって、ng-repeatを使用すると便利です。私が直面している問題は、すべてのリスト項目のhtmlは同じですが、各リスト項目（Mercedes、Ferrari、Red Bull、Williams）の名前は異なりますが、それぞれのIDはそれぞれ異なります。ですから、ng-repeatを使うことはできますか？そうでない場合は、これより短いメソッドがありますか、またはすべてのリスト項目のすべてのhtmlを何度も書き直さなければなりませんか？nav-tabsでangular-js 'ng-repeat'ディレクティブを使用すると、各タブは同じHTMLを持ちますが、異なる名前とIDを持ちます

<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>

出典

2016-07-06 SHIVANG AGARWAL

タブをクリックしたときに自動的にIDを生成することができます。どのように、なぜそれが使用され、私は$インデックス変数を使用に慣れていないよ

<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"> 
 
\t \t <a href="#{{currentItem}}" ng-click="setTempItem(car)">{{car}}</a> 
 
\t \t </li> 
 
      </ul> 
 
     
 
     <div id="{{currentItem}}" class="tab-content"> 
 
      <div class="tab-pane active" role="tabpanel"> 
 
       {{currentItem}} 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</body> 
 

 
</html>

出典

2016-07-06 20:32:45 Ruslan

ありがとう、これは私が探していたものです。しかし、実際にメルセデスをクリックすることなく、そのアイテムのhtmlが表示されるように、リストアイテムの1つ（つまりMercedes）をアクティブなクラスとして入れることができますか？ –

もちろん、配列の1つの項目を取るcurrentItemを初期化することができます。 $ scope.currentItem = $ scope.cars [0]のようなものです。 – Ruslan

あなたはこのような何か行うことができます：ここでは

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

をCodePenの例である： http://codepen.io/anon/pen/yJoaYx

出典

2016-07-06 20:13:30

：

angular.module('myApp', []) .controller('myCtrl', function($scope) { $scope.cars = ["Audi", "Mercedes"]; $scope.setTempItem = function(item) { $scope.currentItem = item; } });

ので、HTMLは、このようなものでなければなりませんか？この部分について私を少し導くことができますか？ –

$ indexは、ng-repeat指示文の中でレンダリングされた要素番号にアクセスするために使用できる変数です。 –

SHIVANG AGARWALは、$ indexを使用しないcodepenです：http://codepen.io/anon/pen/yJoaYx –

nav-tabsでangular-js 'ng-repeat'ディレクティブを使用すると、各タブは同じHTMLを持ちますが、異なる名前とIDを持ちます

答えて

関連する問題