将 html 元素 id 传递给 ng-class答案

【问题标题】：Passing html element id to ng-class将 html 元素 id 传递给 ng-class
【发布时间】：2014-11-06 21:59:59
【问题描述】：

我是 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>

我在控制器中定义了一个函数，用于通过检查选项卡 ID 和当前状态名称来确定类（在删除我的父视图的名称之后）

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

我打印出收到的 tabId，它总是“未定义”。不用说，函数总是返回被动作为类名

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

【问题讨论】：

你能设置一个 jsFiddle 或 plunker 来复制这个问题吗？
您是否尝试通过 URL 中的 UI.Router 参数访问 ID？

标签： javascript angularjs angular-ui-router ng-class

【解决方案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);
}

这会翻转标签的状态

【讨论】：

我正在寻找一个答案，如果我们通过更改 URL 来更改状态（选项卡），该答案也将起作用。上面的代码只有在用户点击一个标签时才会起作用。

【解决方案2】：

您好，请看演示：

http://plnkr.co/edit/cyZPh5h1lIYykqrh8Igh?p=preview

你可以使用ui-sref-active指令更多信息你可以在这里找到

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

 <ul class="tabs">
    <li id="tab1" ui-sref-active="active">
      <a ui-sref="state1">State 1</a>
    </li>
    <li id="tab2" ui-sref-active="active">
      <a ui-sref="state2">State 2</a>
    </li>
  </ul>

【讨论】：

请看我对 EliteOctagon 回答的评论