Установить класс css для динамического вывода списка вариантов AngularJS

Question

Установить класс css для динамического вывода списка вариантов AngularJS

0

В моем коде есть два параметра списка. Ежемесячно и ежеквартально у меня есть один класс "активный", который обычно выделяет элемент.

Мне нужно, чтобы класс "active" должен быть применен к одному из вариантов при нажатии или выборе. Здесь class= active применяется только ежемесячно вручную. Ищите Угловое решение для этого.

  <div class="list">
           <p class="subheader secondary">Select Preferred View</p>
           <ul class="tabs">
           <li><a href="#monthly" ng-click="type='month'" data-ajax="false" **class=active**>Monthly</a></li>
           <li><a href="#quarterly" ng-click="type='quarter'" data-ajax="false">Quarterly</a></li>
   </ul>
  </div>

ronypatil 24 нояб. 2015, в 19:10

Источник

Теги:

angularjs

css

css3

angularjs-directive

1 ответ

Ещё вопросы

Keammoort · Accepted Answer · 2015-11-24T16-19-00.000Z

Используйте директиву ng-class, как в приведенном ниже коде.

<div class="list">
           <p class="subheader secondary">Select Preferred View</p>
           <ul class="tabs">
           <li><a href="#monthly" ng-click="type='month'" ng-class="{'active' : type=='month'}" data-ajax="false" **class=active**>Monthly</a></li>
           <li><a href="#quarterly" ng-click="type='quarter'" ng-class="{'active' : type=='quarter'}" data-ajax="false">Quarterly</a></li>
   </ul>
  </div>

Он добавляет заданный класс, когда выражение, указанное после того, как classname принимает значение true, удаляет его, когда оно вычисляется как false.

ng-class="{'classname' : expression}"

Вы можете установить значение по умолчанию в контроллере:

$scope.type = 'month';

или с помощью директивы ng-init на div:

<div class="list" ng-init="type='month'">

jsfiddle с примером

jsfiddle с настройкой по умолчанию в ng-init

Благодарю. Здесь активный класс по умолчанию выделяет Ежемесячно, а когда я нажимаю Квартально, теперь он выделяется Ежеквартально, но не удаляется из Ежемесячно. Я хочу переключать выбор и оставаться активным ежемесячно по умолчанию
Вы смотрели в jsfiddle? Там активный класс удаляется из Ежемесячно. Установив значение по умолчанию, вы можете обработать его в контроллере, установив $ scope.type = 'month'; или добавив ng-init = "type = 'month'" в родительский div
@ user3606556 Если это так, то, пожалуйста, примите мой ответ.