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

Я новичок в 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>

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

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

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

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


javascript angularjs angular-ui-router ng-class
person Arun Stanislavose    schedule 06.11.2014    source источник
comment
можете ли вы настроить jsFiddle или plunker для воспроизведения проблемы?   -  person SoluableNonagon    schedule 07.11.2014
comment
вы пытаетесь получить доступ к идентификатору из параметра UI.Router в URL-адресе?   -  person D_R    schedule 07.11.2014

Ответы (2)


arrow_upward
0
arrow_downward

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

Это перевернет состояние ваших вкладок

person SoluableNonagon    schedule 06.11.2014
comment
Я искал ответ, который также будет работать, если мы изменим состояние (вкладку), изменив URL-адрес. Приведенный выше код будет работать только тогда, когда пользователь нажимает на вкладку. - person Arun Stanislavose; 07.11.2014

arrow_upward
0
arrow_downward

Привет, пожалуйста, посмотрите эту демонстрацию:

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>
person sylwester    schedule 06.11.2014
comment
Пожалуйста, смотрите мой комментарий к ответу EliteOctagon. - person Arun Stanislavose; 07.11.2014