Передача идентификатора элемента html в ng-класс

Question

Я начинаю с углового и 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> 

У меня есть функция, определенная в контроллере для определения класса, проверив вкладку идентификатор и текущее состояние имя (после обрезки вне имени для моих взглядов родительских)

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

я распечатал tabId получен, и он всегда «неопределен». Излишне говорить, что функция всегда возвращает пассивное имя класса

Как правильно передать значение id контролируемой функции?

Answer 1

нг-класс ожидает, что объект, так

Попробуйте вместо этого:

<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); 
} 

Это переворачивать состояние вкладок

Answer 2

Hi посмотрите пожалуйста, что демо:

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>