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.

I can't see any ng-repeat in your html

svarog
– svarog

2017-02-12 08:54:36 +00:00
Commented Feb 12, 2017 at 8:54 — svarog
– svarog, Commented Feb 12, 2017 at 8:54

svarog · Accepted Answer · 2017-02-12 09:11:18Z

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>

answered Feb 12, 2017 at 9:11

svarog

9,8855 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vr3w3c9 Over a year ago

thanks for the solution above. I wanted to include some dynamic html code under the link. In the above u have specified some_link.html. can you please let me know how to insert the dynamic html code. should i create a var and include and attach ? any help on this is much appreciated.Thanks

svarog Over a year ago

the angular docs are not that good but they will help you get your bearings, also, here's a simple plunk that demonstrates ngRepeat

vr3w3c9 Over a year ago

thanks for the plunk example. I was trying to include some dynamic html in link and was trying to call it from the html code, but could not view the dynamic html code. It does not give any error as well. Your help on this is much appreciated.

Collectives™ on Stack Overflow

Angularjs dynamically add li element on button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related