ng-click different behaviour when clicking second time

Question

Below is my HTML

<div id="alertmap-buttons" class="span2 no-margin">
                        <button id="alert-add-location" class="btn btn-default pull-left" ng-click="displayMap = !displayMap"><span ng-if="!displayMap">Add Location</span><span ng-if="displayMap">Done</span></button>
                        <button id="alert-cancel-location" class="btn btn-danger" ng-if="displayMap" ng-click="alert.latitude = !alert.latitude; alert.longitude = !alert.longitude;">Cancel</button>
                   </div>

                    <div ng-if="alert.latitude && alert.longitude" id="latlng-label" class='span3 pull-right no-margin'>
                        <div class="pull-left"><label class="latlng-label">lat: {{alert.latitude}}</label></div>
                        <div class="pull-right"><label class="latlng-label">long: {{alert.longitude}}</label></div>
</div>

Here am trying to hide lat & long when clicking on Cancel button, but when I clicked on Cancel button second time it is again showing as

lat:true            lang:true

What should be done here to remove this?

And one more thing, here displayMap is diplaying a map to choose lat and lang, after choosing when we click Done map will be disappeared and a form will be shown to the user. All these things will happen in a modal dialog box. Here when I click on Cancel I need to clear the values of lat & long also I need to do this

displayMap = !displayMap

But this combination is not working? Any ideas on this?

Thanks

Answer 1

You are reversing the value. Stop reversing it and set the value to false.

ng-click="alert.latitude = false; alert.longitude = false;"

UPDATE:

ng-click="displayMap = !displayMap; alert.latitude = false; alert.longitude = false;"

But as this is getting a bit verbose I would probably create a function in my controller to reset these values. As far as I know with ng-click you can make it do as many things as you want as long as they are semi-colon separated.