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

Question

我正在尝试根据来自 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)
    });
});

Answer 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 等角度指令做的事情，请使用自定义指令