AngularJs template tags not evaluating sometimes

Question

I'm wondering why templating tag [[ opt.option ]] is not evaluating to a value sometimes in the following code

<span ng-repeat="opt in options">
<button ng-click="button = [[ opt.option ]]" ng-class="{ active : button == [[ opt.option ]] } ng-cloak>
<i class="icon-tick visible-in-active" ></i>[[ opt.option ]] </button>
</span>

The buttons are are being outputted with names meaning the template tag for naming the button is working but when I click any of the buttons, none is being active meaning the templating tags for ng-click and ng-class are not evaluating. why is this?

Edit
I'm using django so I had to override {{}} with [[]] since django uses these tags too {{}}

I want to achieve THIS. when a button is clicked, it becomes active and the previous active one becomes inactive. This is what am getting JsFiddle

ksimons · Accepted Answer · 2013-10-17 07:27:34Z

1

Inside of ng-click and ng-class you don't need to use data binding operators. You can just say :

<button ng-click="button = opt.option" ng-class="{ active : button == opt.option }">

Also the data binding operator in angular is {{ }} not [[ ]].

Finally, you have a typo and have not closed the opening button tag (you're missing the last '">')

Update - as pointed out the binding operator can be customized so this is not actually an issue.

Update - here's an example plunk: http://plnkr.co/edit/t4hmRmJCI22bjqMe1Jc4?p=preview

edited Oct 17, 2013 at 7:27

answered Oct 16, 2013 at 21:41

ksimons

3,83620 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jonathan Rowny Over a year ago

It should be noted that this is customizable. He could have changed it to [[]] from {{}}.

ksimons Over a year ago

@JonathanRowny never knew that! Thanks for pointing it out. Any practical use for that feature?

Jonathan Rowny Over a year ago

I'm sure there is but not that I can think of... maybe you just hate squiggly brackets? There's an example of how to do it here: docs.angularjs.org/api/ng.$interpolateProvider

Jonathan Rowny Over a year ago

It just occurred to me that the "practical use" is that he's using Django templating and doesn't want to escape all those mustaches that Django templates use. So [[]] == client side and {{}} == server side. We're so off topic!

Alexxio Over a year ago

@ksimons I've tried that and still not working. Check the fiddles I have added please.

|

Eran H. · Accepted Answer · 2013-10-16 21:39:41Z

0

You need to use {{ }} not [[ ]]

answered Oct 16, 2013 at 21:39

Eran H.

1,2491 gold badge9 silver badges23 bronze badges

4 Comments

Jonathan Rowny Over a year ago

He probably has overridden $interpolateProvider to use [[]] instead of {{}}. It wouldn't ever work if this wasn't done.

wtsang02 Over a year ago

adding an explaination would be nice.

Eran H. Over a year ago

Interesting didn't know that :) Though I don't think he changed, he would have said

Alexxio Over a year ago

@EranH. I'm actually using django so I had to override {{}} with [[]] since django uses these tags too {{}}. I have Edited the question please.

Collectives™ on Stack Overflow

AngularJs template tags not evaluating sometimes

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related