javascript - AngularJS在单击按钮时动态添加li元素

我试图在每次单击按钮时动态添加li元素。但是没有创建新的li元素。我试图使用ng-repeat达到相同的效果。
下面是我的代码

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>

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

 }
 }
 });

在上面的代码中，第一次单击“查询”按钮时，将创建选项卡。第二次单击时，将修改同一选项卡，而不是创建一个新选项卡。您能不能让我知道如何达到相同的效果。在每次单击按钮时，我希望创建一个新选项卡。

任何帮助对此表示感谢。

最佳答案

您正在执行ng-repeat="tabs in tabcount"，而tabcount是数字，则ngRepeat需要遍历可迭代变量（例如列表或对象）。

从docs


  ngRepeat指令对集合中的每个项目实例化一次模板。每个模板实例都有其自己的作用域，其中给定的循环变量设置为当前集合项，$ index设置为项索引或键。


尝试将tabcount实例化为空数组

$scope.tabcount = [];

在onClick函数内部，推入这样的对象

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

并使用ngRepeat遍历html中的该列表

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

关于javascript - AngularJS在单击按钮时动态添加li元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42185759/