Question

我正在尝试根据来自角度函数的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等角度指令，使用自定义指令

在API设置上激活设置标签窗格？

1 个答案: