Angularjs가 버튼 클릭시 li 요소를 동적으로 추가합니다.

Question

각 버튼 클릭시 li 요소를 동적으로 추가하려고합니다. 그러나 새로운 li 요소는 생성되지 않습니다. 나는 똑같은 것을 달성하기 위해 반복을 사용하려고 노력하고있다. 다음은

html 코드 내 코드입니다

<div data-ng-app="myApp" data-ng-controller="TestController" > 
<div ng-show="showQuerydiv" id="qscompid" style="margin-left:170px;margin-top:90px"> 
    <div class="btn-group" id="buttonOptions" style="width: 100%; position:absolute;"> 
    <a href="#" class="btn btn-primary" ng-click="openQuerydiv('query')">Query</a> 
    <a href="#" class="btn btn-primary" ng-click="openQuerydiv('script')">Script</a> 
    <a href="#" class="btn btn-primary" ng-click="openQuerydiv('compare')">Comp</a> 
    <div style="float: right; width: 30%"> 
    <a href="#operationDetailInfo" class="glyphicon glyphicon-info-sign" data-toggle="collapse" style="float: left;" title="Info"></a> 
    <div id="operationDetailInfo" class="collapse" style="width: 95%; float: left;"> 
    </div> 
    </div> 
    <br> 
    <div id="sqlQueryDiv" ng-show="isShow" style="width: 100%;margin-top: 30px;margin-left: -170px;"> 
     <ul class="nav nav-tabs" role="tablist" id="queryULId" style="width: 1140px;height: 39px;"> 
      <li class="active" ng-repeat="tabs in tabcount"> 
       <a href="#queryTab"+{{tabCount}} role="tab" data-toggle="tab"> 
       {{tabName}}{{tabCount}} 
       </a> 
       <span class="close" style="font-size: 12px; position: absolute; margin-left: 85%; margin-top: -25%; cursor: pointer;">X</span> 
     </li> 
    </ul> 
    <div class="tab-content" style="width:1177px;height: 225px;"> 

    </div> 
    </div> 
    </div> 
</div> 

쿼리 버튼, 처음으로, 탭의 클릭에 위의 코드에서 JS 각도 코드

var app = angular.module('myApp', []); 
app.controller('TestController', function($scope){ 
console.log('Going for execution '); 
$scope.tabCount = 0 ; 
$scope.showQuerydiv = true; 
$scope.isShow = false; 
$scope.list =" " ; 
$scope.openQuerydiv = function(parameter) 
{ 
    alert("inside the openqueryDiv") ; 
    if(parameter == 'query') 
{ 
    alert("inside the openquerydiv" + parameter); 
    $scope.isShow=true; 
    $scope.tabName='SQL Query'; 
    $scope.tabCount++ ; 

} 
} 
}); 

, 만들어집니다. 두 번째 클릭시 새 탭을 만드는 대신 동일한 탭이 수정됩니다. 당신은 저에게 동일한 것을 달성하는 방법을 알려주십시오. 각 단추를 클릭하면 새 탭을 만들 수 있습니다.

이 문제에 대한 도움을 주시면 감사하겠습니다.

Answer 1

ng-repeat="tabs in tabcount"입니다. tabcount은 숫자이고, ngRepeat는 목록이나 개체와 같은 반복 가능한 변수를 반복해야합니다. docs

ngRepeat 지시어에서

는 컬렉션에서 항목 당 한 번 템플릿을 인스턴스화합니다. 각 템플릿 인스턴스는 자체 루프 변수를 가져 와서 루프 변수를 현재 컬렉션 항목으로 설정하고 $ index를 항목 인덱스 또는 키로 설정합니다.

<li class="active" ng-repeat="tabs in tabcount"> 
    <a href="{{tabs.link}}" role="tab" data-toggle="tab"> 
    {{tabs.name}} 
    </a> 
    <span class="close" style="font-size: 12px; position: absolute; margin-left: 85%; margin-top: -25%; cursor: pointer;">X</span> 
</li> 

ngRepeat를 빈 상태 (empty)의 배열이

$scope.openQuerydiv = function(parameter) { 
    $scope.tabcount.push({ 
     type: parameter, 
     link: "some_link.html", 
     name: "some name" 
    }); 
} 

처럼 온 클릭 기능 푸시 객체 내부

$scope.tabcount = []; 

으로 tabcount를 인스턴스화하고 사용하여 HTML에서 그 목록을 반복하는

시도