Angularjs dynamically add li element on button click

Question

Im trying to dynamically add an li element on each button click. But the new li element is not getting created. Im trying to use ng-repeat to acheive the same. Below is my code

html code

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

Angular js code

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

 }
 }
 }); 

In the above code, on click of the Query button, the first time, the tab gets created. On the second click, the same tab gets modified instead of creating a new tab. Can you please let me know how to acheive the same. on each button click, I want a new tab to be created.

Any help on this is much appreciated.

Answer 1

You are doing ng-repeat="tabs in tabcount" while tabcount is a number, ngRepeat needs to iterate over an iterable variable, such as list or an object.

From the docs

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Try to instantiate tabcount as an empty array

$scope.tabcount = [];

Inside the onClick function push objects like this

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

And iterate on that list in the html using ngRepeat

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