Условие в классе ng не работает

AngularJS

У меня есть сценарий применения класса на основе условия, в котором я динамически сохраняю значение в rootscope и оцениваю угловое выражение html, но все еще не работаю

<li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li>

В элементе проверки, если я проверю, я увижу 1==1, но класс все равно не станет активным, и если я удалю {{vm.$rootScope.currentPage}} и поставлю 1, он работает

Я пробовал это также

<li role="presentation" style="width:200px" ng-class="{'active':2=={{vm.$rootScope.currentPage}} }"><a href="#/include">include</a></li>

То же самое и с этим, я также вижу 2 == 2, но все еще не активируется, и если статически разместить 2 == 2, он работает


angularjs ng-class angularjs-1.5
person sudhir    schedule 12.04.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы неправильно пишете, сделайте так:

ng-class="{'active': true, 'inactive': false}

Сначала имя класса, затем условие.

И для этого:

ng-class="{'active': 2 === vm.$rootScope.currentPage}"

Никаких дополнительных скобок внутри, потому что это уже выражение.

person Chrillewoodz    schedule 12.04.2016
comment
Не работает, ng-class={active: 'true', inactive: 'false'}[1==1] -1-й код в inspectElement, ng-class={'active':2===vm.$rootScope. текущая страница } - person sudhir; 12.04.2016
comment
Не заключайте логические значения в кавычки. Сделай так, как я показал. - person Chrillewoodz; 12.04.2016
comment
да, я даже удалил кавычки с тем же выводом, проблема не в том, что выражение оценивается, а в том, что происходит какое-то позднее связывание, я думаю, потому что, когда я статически размещаю выражение, оно работает - person sudhir; 12.04.2016
comment
Тогда это уже совсем другой вопрос, вроде бы этот уже решен. Если вам нужна помощь и в другом, задайте новый вопрос :) - person Chrillewoodz; 12.04.2016
comment
обертывание имени класса требуется только в том случае, если в имени класса есть дефис. {active:true} должно работать {'active-more':true} требует одинарных кавычек - person Justin Kruse; 24.02.2017