javascript - 将 html 元素 id 传递给 ng-class

Question

我是 Angular 和 ui-router 的初学者。我正在尝试根据当前状态名称为标题中的选项卡应用事件类。

    <ul class="tabs">
        <li id="tab1" ng-class="navTabClass(this.id)">
            <a href="link1.html">Home
            </a>
        </li>
        <li id="tab2" ng-class="navTabClass(this.id)">
            <a href="link2.html">Sales
            </a>
        </li>
    </ul>

我在 Controller 中定义了一个函数，用于通过检查选项卡 ID 和当前状态名称(在删除父 View 的名称后)来确定类

 `$scope.navTabClass = function(tabId) {
                            console.log(tabId);
                            var stateName = $state.current.name;
                            mainTab = stateName.split('.');
                            return (mainTab[1] === tabId) ? 'active' : 'passive';
                        }

我打印了收到的 tabId，它始终是“未定义”。不用说，该函数总是返回 Passive 作为类名

如何将 id 值正确传递给受控函数？

Answer 1

ng-class 需要一个对象，所以

试试这个:

<ul class="tabs">
    <li id="tab1" ng-class="{'active': activeTab === 'tab1'}" ng-click="changeTab('tab1')">
        <a href="link1.html">Home
        </a>
    </li>
    <li id="tab2" ng-class="{'active': activeTab === 'tab2'}" ng-click="changeTab('tab2')">
        <a href="link2.html">Sales
        </a>
    </li>
</ul>

那么你的 JS 看起来像这样:

$scope.changeTab = function(tabName){
    $scope.activeTab = tabName;
    console.log('tabName', tabName);
}

这将翻转您的选项卡的状态