AngularJS-用ng-click进行ng-show不起作用

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.

Answer 1

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

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