Question

我试图在每个锚点上动态创建一个标签，点击角度js。但实际上只需单击一下，就会创建三个选项卡。实际上我只想创建一个选项卡。我不确定原因。

<div ng-show="showQuerydiv" id="qscompid" style="margin-left:170px;margin-top:-30px">
    <div class="btn-group" id="buttonOptions" style="width: 100%; position:absolute;">
    <a href="#" class="btn btn-primary" ng-click="openQdiv('qu')">Query</a>
    <a href="#" class="btn btn-primary" ng-click="openQdiv('sc')">Script</a>
    <a href="#" class="btn btn-primary" ng-click="openQdiv('comp')">Comparison</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="sqlQyDiv" 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;"></ul>
    <div class="tab-content"  ng-bind-html="dataContent"  style="width:1177px;height: 225px;">

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

</div>

Javascript代码

$scope.openQdiv = function(parameter){
var anEl = angular.element('#qscompid').find("#buttonOptions").children('a');
angular.forEach(anEl,function(value, key)
{   
    var a = angular.element(value);
    var ulId = angular.element('#sqlQDiv').children('ul').attr('id') ;
    tabCount++;
    var liEl = angular.element("#"+ulId).find("li");
    angular.forEach(liEl,function(value, key)
    {   
        if(liEl.hasClass("active"))
        {
            liEl.removeClass("active");
        }
            });
    var tconEl = angular.element('#sqlQDiv').children("div.tab-content").children("div");
    angular.forEach(tconEl,function(value, key)
            {   
                if(tconEl.hasClass("active"))
                {
                    tconEl.removeClass("active");
                }
                    });
    $scope.isShow = true;
    $scope.display = "";
    if(parameter == 'qu'){
     var myEl = angular.element('#sqlQDiv').children("div.tab-content");
        angular.element('#sqlQDiv').children("#queryULId").append('<li class="active"><a href="#queryTab'+tabCount+'" role="tab" data-toggle="tab">SQL Query</a><span  class="close" style="font-size: 12px; position: absolute; margin-left: 85%; margin-top: -25%; cursor: pointer;">X</span></li>');
        $scope.dataContent = '<div class="tab-pane fade in active" id="queryTab'+tabCount+'" style="overflow-x: hidden;width: 1177px;">'
                            +'<form role="form" onsubmit="return false" ><div class="form-group"><div class="form-group">'
                        +'<div class="col-xs-2" style="text-align:left;">'
                            +'<input type="text" class="form-control sqlQueryName'+tabCount + '" id="sqlQueryName-querySubmitBtn'+ tabCount +'" placeholder="Query Name"  value="Q1" data-toggle="tooltip" data-placement="right" title="Query Name should be unique"/>'
                        +'</div>'
                    +'</div><br /><br />'
 $sce.trustAsHtml($scope.dataContent);

 }
 });

}

上面是示例代码，每次单击锚点链接时，为每次点击创建三个选项卡，实际上我实际上只需要创建一个选项卡。

代码面临的问题

只需点击一个标签即可创建三个标签。
使用ng-bind-html的问题。代码将插入选项卡内容中。但无法使用插入的动态html代码执行ng-click等操作。

非常感谢上述任何帮助。

在角度js中动态创建选项卡的问题

0 个答案: