применить CSS на основе условия angularjs

Question

применить CSS на основе условия angularjs

0

Я чередуюсь между двумя окнами в angularjs, используя ng-click и ng-show:

<div ng-init="showTab2 = false">
            <a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a>
        </div>
 <div ng-init="showTab2 = true">
            <a ng-click="showTab1 = true; showTab2 = false">#Tab2</a>
        </div>

то с ng-show они появляются

Не могли бы вы рассказать мне, как я могу изменить цвет выбранной вкладки?

спасибо

Jean 01 июнь 2016, в 16:24

Источник

1

Это может помочь вам codepen.io/DesignyourCode/pen/pECjv
DaniP 01 июнь 2016, в 14:16
0

Вы проверили мой ответ?
User2 01 июнь 2016, в 16:57
0

@ User2 спасибо за подробный ответ, он работал с ng-классом, но я не мог использовать ng-switch, потому что он создает другую область видимости $
Jean 02 июнь 2016, в 07:30

Показать ещё 1 комментарий

Теги:

javascript

angularjs

css

2 ответа

1

Пожалуйста, проверьте рабочий пример здесь: Пример

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.showTab = 1; //If you want to select default tab
});

HTML

<div>
    <a ng-click="showTab = 1" ng-class="{'active': showTab == 1}">#Tab1 </a>
</div>
<div>
   <a ng-click="showTab = 2"  ng-class="{'active': showTab == 2}">#Tab2</a>
</div>

<div ng-switch="showTab">
    <span ng-switch-when="1">Tab1</span>
    <span ng-switch-when="2">Tab2</span>
</div>

CSS

.active {
   color: red;
 }

User2 01 июнь 2016, в 12:21

Ещё вопросы

Это может помочь вам codepen.io/DesignyourCode/pen/pECjv
@ User2 спасибо за подробный ответ, он работал с ng-классом, но я не мог использовать ng-switch, потому что он создает другую область видимости $

AranS · Accepted Answer · 2016-06-01T11-55-00.000Z

Я не уверен, как ваш ng-show подходит здесь, но используйте ng-class для переключения css:

<a ng-class = "{'some-class': showTab1}" 
  ng-click="showTab1 = true; showTab2 = false">#Tab1</a>

выдает ошибку в IDE "ожидаемое выражение"