在 API 设置上设置选项卡窗格处于活动状态？

Posted 2023-05-08

【中文标题】在 API 设置上设置选项卡窗格处于活动状态？

【英文标题】：Set tab pane active on API settings?

【发布时间】：2017-10-12 16:49:17

【问题描述】：

我正在尝试根据来自 Angular 函数的 API 的设置设置一个活动选项卡。 api 调用后选项卡被激活，但选项卡窗格未激活。这是我的代码：

html

<ul class="nav nav-tabs" data-toggle="tabs">
                                    <!-- <li ng-show="settings.tabs.timeline" class="active" style="margin-bottom: -2px;"><a href="#timeline" onclick="tabMenu(this.id)" id="timelinetab" data-toggle="tooltip" title="" data-original-title="Timeline"><i class="fa fa-history"></i></a></li> -->
   <li id = "inquiryli" ng-show="settings.tabs.inquiry" style="margin-bottom: -2px;"><a href="#inquiry" onclick="tabMenu(this.id)" id="inquirytab" data-toggle="tooltip" title="" data-original-title="Inquiry"><i class="fa fa-heart"></i></a></li> 
   <li id = "packageli" ng-show="settings.tabs.packages" style="margin-bottom: -2px;"><a href="#package" onclick="tabMenu(this.id)" id="packagetab" data-toggle="tooltip" title="" data-original-title="Packages"><i class="gi gi-snowflake"></i></a></li>
   <li id = "followupli" ng-show="settings.tabs.followups" style="margin-bottom: -2px;"><a href="#followup" onclick="tabMenu(this.id)"  id="followuptab" data-toggle="tooltip" title="" data-original-title="Follow Ups"><i class="fa fa-recycle"></i></a></li>
   <li id = "invoiceli" ng-show="settings.tabs.invoices" style="margin-bottom: -2px;"><a href="#invoice" onclick="tabMenu(this.id)" id="invoicetab" data-toggle="tooltip" title="" data-original-title="Invoices"><i class="gi gi-notes"></i></a></li>
   <li id = "paymentli" ng-show="settings.tabs.payments" style="margin-bottom: -2px;"><a href="#payment" onclick="tabMenu(this.id)" id="paymenttab" data-toggle="tooltip" title="" data-original-title="Payments"><i class="fa fa-money"></i></a></li>
   <li id = "batchli" ng-show="settings.tabs.batches" style="margin-bottom: -2px;"><a href="#batch" onclick="tabMenu(this.id)" id="batchtab" data-toggle="tooltip" title="" data-original-title="Batches"><i class="fa fa-cubes"></i></a></li>
   <li id = "attendanceli" ng-show="settings.tabs.attendance" style="margin-bottom: -2px;"><a href="#attendance" onclick="tabMenu(this.id)" id="attendancetab" data-toggle="tooltip" title="" data-original-title="Attendance"><i class="gi gi-alarm"></i></a></li> 

</ul>

<div class="tab-content">
    <div class="tab-pane" id="package"> ....content ...</div>
    <div class="tab-pane" id="invoice"> ....content ...</div>
    <div class="tab-pane" id="inquiry"> ....content ...</div>
    <div class="tab-pane" id="followup"> ....content ...</div>
    <div class="tab-pane" id="attendance"> ....content ...</div>
</div>

控制器

app.controller('summaryController',function($scope,$http,$timeout,PagerService)

    $scope.settings = ;
    apiCall("session_id":session_id,"user_id":user_id,"summaryRoute.php","selectUserConfig").then(function (response)  
        if(response.data.error == 0)
            $scope.settings = response.data.data;
            if($scope.settings.user_type == 'M')
                $("#packageli").addClass("active");
                $('.nav-tabs a[href="#package"]').tab('show')
            
            else if($scope.settings.user_type == 'I')
                $("#inquiryli").addClass("active");
                 $('.nav-tabs a[href="#inquiry"]').tab('show')
            
            else
                $("#followupli").addClass("active");
                $('.nav-tabs a[href="#followup"]').tab('show')
            
        
        else
           $scope.settings = ; 

      console.log($scope.settings)
    );
);

【问题讨论】：

您似乎找到了使选项卡“活动”的 active 类 - 您是否尝试对窗格执行相同操作？

会怎样？ @MarkC。

摆脱 bootstrap.js 并使用 angular-ui-bootstrap。控制器中不应有 jQuery 或其他 dom 代码。控制器应该知道关于视图结构的任何事情

但有一段时间我想要一些解决方案来解决这个问题@charlietfl

请尝试为此创建 plunker。

【参考方案1】：

您的范围内已经有了您需要的值。您需要做的是使用 ng-class，并且有几种方法可以做到这一点。 https://docs.angularjs.org/api/ng/directive/ngClass

使用对象

<li id = "packageli" ng-class=" active: settings.user_type === 'M' "></li>
<li id = "inquiryli" ng-class=" active: settings.user_type === 'I' "></li>
<li id = "followupli" ng-class=" active: !(settings.user_type === 'I' || settings.user_type === 'M') "></li>

使用函数，更好，因为

逻辑从视图中抽象出来并隔离） 它可以与 ng-show 或任何其他指令一起重复使用 可以重复使用来切换其他元素

html

<li id = "packageli" ng-class="active: isPackageActive()"></li>
<li id = "inquiryli" ng-class="active: isInquiryActive()"></li>
<li id = "followupli" ng-class="active: isFollowUpActive()"></li>

js

function isPackageActive() 
    return settings.user_type === 'M';


function isInquiryActive() 
    return settings.user_type === 'I';


function isFollowUpActive() 
    return !(isInquiryActive() || isPackageActive());

PS： 不要在控制器中使用 jquery。如果你需要做一些你不能用 ng-model、ng-class 等角度指令做的事情，请使用自定义指令