将html元素ID传递给ng-class

Question

I am a beginner with Angular and ui-router. I am trying to apply an active class for a tab in the header based on the current state name.

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

I have a function defined in the controller for determining the class by checking the tab id and current state name (after trimming out the the name for my parent views)

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

I printed out the tabId received and it is always 'undefined'. Needless to say, the function always returns passive as the class name

How do I pass the id value correctly to the controlled function ?

Answer 1

ng-class expects an object, so

Try this instead:

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

Then your JS would look like this:

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

This would flip the state of your tabs

Answer 2

Hi please see that demo :

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

you can use ui-sref-active directive more info you can find here

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>