2016-07-11 41 views
2

我正在面對Bootstrap Collapse選項的一個問題,當我點擊某個項目時需要打開一些星形指令(uib-rating),我已經使用了UI-BootstrapBootstrap'collapse in'class not appending issue

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重複這裏value.quesList.quesListName來自NG-重複本身。

JS-CODE:

$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; 
      }); 
     } 

} 

我不知道爲什麼這種崩潰不能正常工作。

+0

始終使用parseInt'的'第二個參數。 – gcampbell

回答

2

您可以隨時使用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; 
     }); 
    } 
+0

嘿謝謝@ swathi.Its爲我工作:) –

1

我遇到了這種情況下這麼多的問題。我谷歌了不同的解決方案,但沒有幫助我,最後我遇到了這個解決方案。希望能幫助別人。

enter image description here

=>在這裏,我們需要使用服務器端控件綁定。 =>我們可以使用c#codebeheind文件輕鬆完成此操作。

步驟1:在.aspx頁面中爲外部div編寫父ID,並將其設置爲runat =「server」。我們將把我們的bootstrap標籤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步:重定向到母版頁並傳遞查詢字符串作爲參數來加載單擊的用戶控件。 whater根據查詢字符串參數,我們將要採取的查詢字符串參數到用戶控件綁定到該div只有 如:HREF =「Master.aspx loadUC =一個?」

第3步:寫頁面加載事件代碼

  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標籤按鈕或減號圖標或Tab標題,它將添加'panel-collapse collapse'從代碼隱藏中移除類並移除面板摺疊崩潰類。它會按預期工作。

第5步:和把所有頁裝訂方法,dropdownlistbinding法等在Page_Init方法的()mentod