AngularJS - ng-show with ng-click not working

Question

I am writing a simple AngularJS app, that retrieves some data from openWeatherAPI and return some values.

Now I want to be able to display the air temperature in either celsius or fahrnheit. I figured I'd do this using ng-show and ng-click. Somehow I can't seem to get it to work.

What I do is define a variable called stopinje like this: $scope.stopinje = true;. Then I want to change this to false using ng-click, so when a user clicks a button, the celsius degrees will disappear, and the fahrnheit ones will appear.

My HTML:

<li ng-show="{{!stopinje}}">{{ fahrnheit }}</li>
<li ng-show="{{!stopinje}}"><button ng-click="stopinje = true">show temperature in celsius</button></li>
<li ng-show="{{stopinje}}">{{ celsius }}&nbsp;&deg;C</li>
<li ng-show="{{stopinje}}"><button ng-click="stopinje = false">show temperature in fahrnheit</button></li>

My controller:

$scope.stopinje = true;

Here's a codepen of the whole thing.

jcubic · Accepted Answer · 2016-02-10 13:55:16Z

2

The ng-show directive doesn't like the {{ }} syntax. Just provide it an expression directly:

<li ng-show="!stopinje">{{ fahrnheit }}</li>

edited Feb 10, 2016 at 13:55

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

answered Feb 10, 2016 at 13:51

null

7,9163 gold badges39 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - ng-show with ng-click not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related