在导航选项卡中使用 angular-js 'ng-repeat' 指令，每个选项卡具有相同的 html 但名称和 ID 不同

Question

这是我代码中nav tabs的一个小列表，实际上列表很长。所以使用 ng-repeat 会很有帮助。我面临的唯一问题是，尽管所有列表项的 html 相同，但每个列表项（梅赛德斯、法拉利、红牛、威廉姆斯）的名称不同，并且每个都有不同的 ID。那么我可以使用 ng-repeat 吗？如果没有，是否有更短的方法，或者我是否必须一次又一次地为所有列表项编写所有 html？

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

Answer 1

你可以这样做：

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

这是 CodePen 示例： http://codepen.io/anon/pen/yJoaYx

Answer 2

您可以在点击标签时自动生成一个 ID。

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

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

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

    }

});

所以 html 应该是这样的：

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

在导航选项卡中使用 angular-js 'ng-repeat' 指令，每个选项卡具有相同的 html 但名称和 ID 不同

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

angularjs

angularjs-directive

ng-repeat

angularjs-ng-repeat