控制 html 元素是否具有类并将其传递给 angular 属性答案

【问题标题】：Control if a html element has a class and pass it to a angular propertiy控制 html 元素是否具有类并将其传递给 angular 属性
【发布时间】：2018-02-07 18:40:31
【问题描述】：

我有一个控制 4 个选项卡的选项卡窗格，我可以用 2 个按钮切换选项卡，“上一个”和“下一个”，问题是我想禁用第一个和最后一个选项卡上的按钮，如何我在页面控制器中执行此操作？我正在尝试将 ng-disabled 设置为变量，并运行 if 以查看选项卡的第一个子项是否具有活动类。但它不起作用

HTML标签代码+按钮

   <ul class="nav nav-tabs" data-tab-navigation="">
                        <li class="active">
                            <a href="#aba-atributos" role="tab" data-toogle="tab">Atributos</a>
                        </li>
                        <li>
                            <a href="#aba-historico" role="tab" data-toogle="tab">Histórico</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active painel-atributos" id="aba-atributos">
                            <div class="row">
                                <div class="col-xs-12 col-md-3 col-lg-2">
                                    <ul class="nav nav-list menu-etapas-formulario" data-tab-navigation="">
                                        <li class="active">
                                            <a href="#aba-identificacao" role="tab" data-toggle="tab"><span class="menu-text">Identificação</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-medidas" role="tab" data-toggle="tab"><span class="menu-text">Medidas</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-comercial" role="tab" data-toggle="tab"><span class="menu-text">Comercial</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-tributario" role="tab" data-toggle="tab"><span class="menu-text">Tributário</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-midias" role="tab" data-toggle="tab"><span class="menu-text">Mídias</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-nutricional" role="tab" data-toggle="tab"><span class="menu-text">Nutricional</span></a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-md-9 col-lg-10">
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="aba-identificacao">
                                            <partial:_abaIdentificacao runat="server" ID="_abaIdentificacao" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-medidas">
                                            <partial:_abaMedidas runat="server" ID="_abaMedidas" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-comercial">
                                            <partial:_abaComercial runat="server" ID="_abaComercial" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-tributario">
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-midias">
                                            <partial:_abaMidias runat="server" ID="_abaMidias" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-nutricional">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2">
                                    <div class="text-center" ng-show="editMode">
                                        <br />
                                        <button type="button" name="voltar" class="btn btn-info btn-voltar" ng-disabled="firstTab">
                                            <i class="icon-backward bigger-110"></i>
                                            <span translate="15.BTN_Voltar">Voltar</span>
                                        </button>

我的控制器代码

  $scope.firstTab = function () {
            const el = document.getElementById(".menu-etapas-formulario > li:firstChild");
            if (angular.element(el).hasClass('active')) {
                return false;
            }
            else
                return true;                     
        }

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

使用这样的东西 1.在你的html元素中添加

ng-click="clicked($event)"

在你的控制器中

点击函数（事件）{ $超时（函数（）{ $(event.target).attr('你的选择器'); // 为你的元素设置一个布尔值，比如 $scope.enabled }, 0); }

【讨论】：