ng-class

问题 <ul> <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false"> <img data-ng-class="{'active' : toggle}" src="" /> </li> </ul> CSS for 'active' class is from bootstrap. So toggling works, which is almost where I want it; I would like it similar to active states in navigation links, except in my example it's dealing with images so need to worry about url strings, etc. I tried emulating this example found here to no avail (I tried the same logic for

问题 Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this <ul class="sub_modules"> <li *ngFor="let subModule of subModules" class="active"> <a>{{ subModule.name }}</a> </li> </ul> can anyone help me to do this? 回答1: You can do something like: <ul class="sub_modules"> <li (click)="activateClass(subModule)" *ngFor="let subModule of subModules" [ngClass]="{'active': subModule.active}"> <a>{{ subModule.name }}</a>

问题 Here is an example of what I want to achieve data-ng-class="{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name }" but it doesn't work. 回答1: Use the array form for ng-class : <div ng-class="[showTooltip ? 'tooltip_show' : '', 'tooltip__' + brand.settings.name]"> <div> OR compute the class in JavaScript: <div ng-class="computeClass(tooltip_show, brand.setting.name)"> </div> $scope.computeClass(show, name) { var obj = {}; obj.showTooltip = show; obj['tooltip_'+name] = true;

问题 I have a CSS file looking like this: aside { .myClass { ul li { color: black } } } .myClass2 { ul li { color: white } } And I want to use [ngClass] to dynamically change these CSS classes and have different colors. I have tried this [ngClass]="{'myClass': value==='option1', 'myClass2': value=== 'option2'}" But it's not working. aside { background-color: white; min-height: 100%; padding-top: 10px; width: $aside-width; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.16); .sidebar-logo { margin-top: 20px;

问题 So I am basically trying to set a highlight if an object is selected already. How can I compare the objects to change classes? Something like this <[ngClass]="{{perkResult.perk === perk.perk}} ? 'highlight' : 'none-hightlight' "> Current code: <div class="col-xs-12"> <div class="col-xs-12 benefit-selection"> <ul class="benefits-dropdown-ul" *ngIf="perkList"> . <a class="benefits-dropdown-div" *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)"> //highlight here <li

问题 Lets say I have some objects in an array (lets call the array "items") like { title: "Title", value: true } and I use ngFor to display them like: <h1 *ngFor="let item of items">{{ item.title }}</h1> Now lets say I want to display a class on the h1 based on if item.value is true or false. How can I do that? I can't add [class.some-class]="{{ item.value }}" . Basically, how can I get the true or false value for the current item into something like ngClass? Am I missing an obvious way to do this

问题 I'm trying to add multiple values in *ngClass, what used to work on previous alpha releases and doesn't seem to work now on angular2 beta: <i *ngClass="['fa','fa-star']"></i> It produces an error: EXCEPTION: TypeError: Cannot read property 'add' of undefined in [['fa','fa-star'] in PostView@30:27] What am I missing here? 回答1: You should use square brackets to create property binding. See this plunk <i [ngClass]="['fa','fa-star']"></i> 回答2: If you aren't going to be changing these classes

问题 I have to track down a bug related to work of ng-class (sometimes it adds new value without removing old). So I need a quick reference to see it's current value. Is there any short (or not) way to bind that to the content? I mean something like this: <div ng-class="something"> {{ngClassValueDisplayedHere}} </div> 回答1: I had exactly the same problem with ng-class not removing old value. After days of investigation it turned out that it was ngAnimate who was messing with class changes. removing

问题 I'm trying to use ng-class with a condition, like this: <li ng-repeat="time in matter.times_hourly | filter:searchText" ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}" > time.write_off_class has two classes inside it called " write_off_bg time_closed ". time.narrativestate has one class inside it called " time_closed " time.write_off is a boolean. So, I think my problem are the quotation marks. I'm not sure where to put them, so

问题 I'm trying to apply a class to only one element at a time (see this plunk). HTML: <ul> <li ng-repeat="item in listItems"> <a ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">L</a> <a ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">R</a> <a ng-class="{'userActive': isActive, 'userInactive': !isActive}" ng-click="isActive = !isActive">J</a> </li> </ul> JS: var app = angular.module("testApp", []); app