AngularJS 부가 기능 탭 목록에 새 탭 추가

Question

내 앱에 탭 탐색 바를 구현하려고합니다. Bootstrap3을 사용하고이 예인 Boostrap Tabs and Pills을 따르십시오.

매번 제시되는 하나의 탭 (#home)이 있습니다. addInput() 함수를 클릭 할 때 생성 할 다른 탭. 즉, tab1, tab2, tab3.

나는 togther 조합을 얻는 방법을 정확히 모릅니다. navbar에 href="#menu1" 및 tab 내부 콘텐츠 용 fitting id = "menu1"이있는 목록 요소를 어떻게 만들 수 있습니까? 여기

내 예를 CodePen.io

<div ng-app="myApp" ng-controller="myCtrl"> 
<form> 
<div class="form-group"> 
    <label for="txtDevice" class="control-label">Form Field 1</label> 
    <input type="text" class="form-control" ng-model="info.name" id="txtDevice"> 
</div> 
<div class="form-group"> 
    <label for="txtIP" class="control-label">Form Field 2</label> 
    <input type="text" class="form-control" ng-model="info.ip" id="txtIP"> 
</div> 


<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
</ul> 


<div class="form-group tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h4>Home</h4> 
    <p>content</p> 
    </div> 
    <div ng-repeat="site in info.sites track by $index"> 
    <h4>tab {{$index +1}}</h4> 
    <p>content</p> 
    </div> 
</div> 


</form> 
    <button ng-click="addInput()">+add more inputs</button> 
{{info | json}} 
    <hr> 


    tags = {{tags | json}} 

</div> 

Answer 1

내가 (http://codepen.io/anon/pen/eBRwev?editors=1010)

이

1. 당신의 탭 탐색 탭 제목에 대한 ng-repeat을 포함하지 않았다 여기에 고정 된 것으로, 펜에 대한 네 가지 잘못이 있었다

   <ul id="myTabs" class="nav nav-tabs"> 
       <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
       <li ng-repeat="site in info.sites track by $index" class="tab-pane fade in"> 
        <a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a> 
       </li> 
   </ul> 
   

2. 부트 스트랩 탭을 사용하는 데 필요한 jQuery 및 Bootstrap JS 라이브러리를 포함하는 것을 잊었습니다.

3. 당신은 부트 스트랩 클릭이 탭

   $('#myTabs a').click(function (e) { 
       e.preventDefault(); 
       $(this).tab('show'); 
   }); 
   

Answer 2

당신이 뭔가를 찾고있다?

id="{{ 'menu' + $index }}"