【问题标题】:Bootstrap 'collapse in' class not appending issueBootstrap 'collapse in' 类不附加问题
【发布时间】:2016-07-11 09:36:16
【问题描述】:

当我单击某些项目时,我遇到了 Bootstrap Collapse 选项的问题,我需要打开一些我使用 UI-Bootstrap 的星星指令 (uib-rating)

HTML:

<p class="text-align" style="cursor:pointer"><a ng-click="fnDisplayQuestions(value.quesList.quesListName,$index)" data-toggle="collapse" data-target="{{#value.quesList.quesListName}}" >{{value.quesList.quesListName}}</a></p>
<uib-rating ng-model="rate" id="{{value.quesList.quesListName}}" class="collapse" max="max" read-only="isReadonly" on-hover="rating=value" ng-click="fnPutRating(rating)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>

这两个都在 ng-repeat 中,这里 value.quesList.quesListName 来自 ng-repeat 本身。

JS 代码:

$scope.fnDisplayQuestions = function(qListName, index) { 

        $scope.indexQList = index;
        $scope.sQList = qListName;

        if (parseInt(window.localStorage.getItem('currentRound')) == 1) {
            getCandidateInterviewListService.fnGetQuestions(qListName).then(function(response) {
                $scope.aQuestions = response;
            });
        } else {
            getCandidateInterviewListService.fnGetQuesRoundBased(qListName).then(function(response) {
                $scope.aQuestions = response;
            });
        }

}

我不知道为什么这个折叠不能正常工作。

【问题讨论】:

  • 始终使用parseInt的第二个参数。

标签: javascript angularjs twitter-bootstrap


【解决方案1】:

你总是可以使用ng-if 和一些条件如下:

HTML:

<p class="text-align" style="cursor:pointer"><a ng-click="fnDisplayQuestions(value.quesList.quesListName,$index)"  >{{value.quesList.quesListName}}</a></p>
<uib-rating ng-model="rate" ng-if:"selectedQuestions" max="max" read-only="isReadonly" on-hover="rating=value" ng-click="fnPutRating(rating)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>

JS:

$scope.fnDisplayQuestions = function(qListName, index) { 
$scope.selectedQuestions=true;          
    $scope.indexQList = index;
    $scope.sQList = qListName;
if (parseInt(window.localStorage.getItem('currentRound')) == 1) {
        getCandidateInterviewListService.fnGetQuestions(qListName).then(function(response) {
            $scope.aQuestions = response;
        });
    } else {
        getCandidateInterviewListService.fnGetQuesRoundBased(qListName).then(function(response) {
            $scope.aQuestions = response;
        });
    }

【讨论】:

    【解决方案2】:

    在这种情况下,我遇到了很多问题。我用谷歌搜索不同的解决方案,但没有一个对我有帮助,最后我遇到了这个解决方案。希望对某人有所帮助。

    enter image description here

    => 这里我们需要使用服务器端控件绑定。 => 我们可以使用 c# codebeheind 文件轻松做到这一点。

    第 1 步:在 .aspx 页面中为您的外部 div 编写父 ID,并将其设置为 runat="server"。我们会将引导选项卡 div 放在这个 div 中,以便我们可以轻松访问手风琴类的子元素。

                <div class="panel-group accordion" runat="server" id="parenAccordian">                                   
                                   <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a runat="server" href="Master.aspx?loadUC=One" data-target="#collapseOne" data-parent=".accordion"
                                                    data-toggle="collapse" class="accordion-toggle tab_design" target="_self" aria-expanded="true" aria-controls="collapseOne">
                                                    <span class="glyphicon glyphicon-plus" id="spanOne" runat="server"></span>
                                                    <asp:Label ID="lblTabOne" runat="server" Text="TabOne"></asp:Label>
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" runat="server" id="collapseOne">
                                            <div class="panel-body">
                                                <div runat="server" id="divOne">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
    
                                   <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a runat="server" href="Master.aspx?loadUC=One" data-target="#collapseTwo" data-parent=".accordion"
                                                    data-toggle="collapse" class="accordion-toggle tab_design" target="_self" aria-expanded="true" aria-controls="collapseOne">
                                                    <span class="glyphicon glyphicon-plus" id="spanTwo" runat="server"></span>
                                                    <asp:Label ID="lblTabTwo" runat="server" Text="TabTwo"></asp:Label>
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" runat="server" id="collapseTwo">
                                            <div class="panel-body">
                                                <div runat="server" id="divTwo">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
            </div>
    

    第 2 步:重定向到母版页并将查询字符串作为参数传递以加载单击的用户控件。什么是查询字符串参数,根据我们将使用该查询字符串参数将该用户控件绑定到该 div 例如:href="Master.aspx?loadUC=One"

    第三步:在页面加载事件中编写代码

             string userControlID = ((System.Web.UI.Page)(sender)).ClientQueryString;
            var controlID = userControlID.Substring(userControlID.LastIndexOf('=') + 1);
            if (Request.QueryString["loadUC"] == controlID)
            {
                //get clicked control id
                HtmlGenericControl collapseDiv = (HtmlGenericControl)parenAccordian.FindControl("collapse" + controlID);
                collapseDiv.ID = "collapse" + controlID;
                collapseDiv.Attributes.Add("id", collapseDiv.ID);
    
                //load clicked user control and add bind to html div
                UserControl userControl = (UserControl)Page.LoadControl("~/UserControls/ModuleEngineering/SystemConfiguration/" + "UC" + controlID + "System.ascx");
                userControl.ID = "test";
                string userControlDivID = "div";
                string modifiedControlDivID = userControlDivID.Insert(3, controlID + "Data");
    
                HtmlGenericControl userControlDiv = (HtmlGenericControl)parenAccordian.FindControl(modifiedControlDivID);
                userControlDiv.ID = modifiedControlDivID;
                userControlDiv.Controls.Add(userControl);
    
                //add remove collapse plus minus class on click
                HtmlGenericControl spanDiv = (HtmlGenericControl)parenAccordian.FindControl("span" + controlID);
                spanDiv.ID = "span" + spanDiv;
                spanDiv.Attributes.Add("id", spanDiv.ID);
    
                string newTabValue = Convert.ToString(Session["NewCollapseTabValue"]);
                if (Session["NewCollapseValue"] == null)
                {
                    Session["NewCollapseValue"] = "panel-collapse collapse";
                }
                if (Request.QueryString["loadUC"] == newTabValue)
                {
                    if (Request.QueryString["loadUC"] == newTabValue)
                    {
                        if (collapseDiv.Attributes["class"] != Convert.ToString(Session["NewCollapseValue"]))
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-plus");
                        }
                        else
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse in");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-minus");
                        }
                    }
                    if (Request.QueryString["loadUC"] != newTabValue)
                    {
                        if (collapseDiv.Attributes["class"] != Convert.ToString(Session["NewCollapseValue"]))
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse in");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-minus");
                        }
                        else
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-plus");
                        }
                    }
                    Session["NewCollapseValue"] = collapseDiv.Attributes["class"];
                }
                if (Request.QueryString["loadUC"] != newTabValue)
                {
                    if (collapseDiv.Attributes["class"] == Convert.ToString(Session["NewCollapseValue"]))
                    {
                        if (collapseDiv.Attributes["class"] == Convert.ToString(Session["NewCollapseValue"]))
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse in");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-minus");
                        }
                        else
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-plus");
                        }
                    }
                    else if (collapseDiv.Attributes["class"] != Convert.ToString(Session["NewCollapseValue"]))
                    {
                        if (collapseDiv.Attributes["class"] != Convert.ToString(Session["NewCollapseValue"]))
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse in");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-minus");
                        }
                        else
                        {
                            collapseDiv.Attributes.Add("class", "panel-collapse collapse");
                            spanDiv.Attributes.Add("class", "glyphicon glyphicon-plus");
                        }
                    }
                    Session["NewCollapseValue"] = collapseDiv.Attributes["class"];
                }
                Session["NewCollapseTabValue"] = controlID;
    

    第 4 步:如果您单击 Bootstarp 选项卡按钮或加号图标或选项卡标题,它将从代码隐藏中添加“面板折叠折叠”类并删除面板折叠折叠类

    第 5 步:如果您再次单击 Bootstarp 选项卡按钮或减号图标或选项卡标题,它将从代码隐藏中添加“面板折叠折叠”类并删除面板折叠折叠类。它会按预期工作。

    第5步:把你所有的页面绑定方法,下拉列表绑定方法等方法放在Page_Init() mentod中

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-01-03
      • 2016-12-07
      • 2013-09-15
      • 2014-10-16
      • 2016-11-18
      • 2017-08-18
      • 2016-12-17
      • 1970-01-01
      相关资源
      最近更新 更多