CODEWITHSUNDEEP
javascriptangularjsdjango-templatesangularjs-directive
Alexxio
Alexxio

Reputation: 1101

AngularJs template tags not evaluating sometimes

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

Upvotes: 0

Views: 341

Answers (2)

ksimons
ksimons

Reputation: 3826

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

Upvotes: 1

Eran H.
Eran H.

Reputation: 1239

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

Upvotes: 0

Related Questions