I think: ng-class should look like ng-class="{active: true}", instead of
{true: active} It's hard to get my head around it, but it basically
evaluates all the values in the attr object, and for each value that is
true, it appends the key as a class name to the class attr on the div. So
in that case, {active: true} doesn't do much, but you can also do {active:
'item.selected'} or whatever.e On Wed, Jun 4, 2014 at 6:20 PM, Daniel Plomp <[email protected]> wrote: > Hi all, > > I've a weird issue when using AngularJS. > > I have a simple <ul> with some items: > > <ul class="list add"> > <li><a href="#">iDEAL</a></li> > <li><a href="#">Machtiging</a></li> > <li><a href="#">Anoniem doneren</a></li> > <li class="active"><a href="#">Persoonlijk doneren</a></li> > </ul> > > This renders 4 blocks, like in image 1 (right) > > When I enable AngularJS I changed the code to this: > > <ul class="list add"> > <li data-ng-repeat="item in paymentOptions" > data-ng-model="selectedPaymentOption" > data-ng-click="selectPaymentOption(item)" data-ng-class="{true: 'active', > false: ''}[paymentOptionClass(item)]"><a href="#" onclick="return > false;">{{ item }}</a></li> > <li data-ng-repeat="item in paymentMethods" > data-ng-model="selectedPaymentMethod" > data-ng-click="selectPaymentMethod(item)" data-ng-class="{true: 'active', > false: ''}[paymentMethodClass(item)]"><a href="#" onclick="return > false;">{{ item }}</a></li> > </ul> > > Which then shows me the output as in image 2 (wrong) > > I really can't find any differences in CSS classes and also the AngularJS > css doesn't have conflicting classes. > I'm using Bootstrap 3 and Angular latest version. Any ideas? Is Angular > doing someting with the CSS? > > > > > > <https://lh3.googleusercontent.com/-IjHgZdzhqus/U4-bJcaClkI/AAAAAAAAAE8/uiAAdaT65C8/s1600/right.png> > <https://lh4.googleusercontent.com/-aCb5WgNPc68/U4-bjCfYaJI/AAAAAAAAAFI/SQ4SJQ2Zm1I/s1600/wrong.png> > > -- > You received this message because you are subscribed to the Google Groups > "AngularJS" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
