Error displaying / hiding Div with Angular.js

Question

Error displaying / hiding Div with Angular.js

Navigation

#1 by (4 votes)

3

I need to hide fields using Angular JS , after clicking a button will appear the label below:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><bodyng-app="">

<div>
    <input type="button" ng-model="btnArea" ng-init="btnArea = true" value="Áreas">
    <input type="button" ng-model="btnPonto" ng-init="btnPonto = true" value="Pontos">
</div>

<div ng-if="btnArea">
    <h1>Áreas</h1>
    <p>Welcome to my Áreas.</p>
    <hr>
</div>

<div ng-if="btnPonto">
    <h1>Pontos</h1>
    <p>Welcome to my Pontos.</p>
    <hr>
</div>

Link: JSEddle

javascript angularjs

asked by anonymous 26.09.2016 / 16:30

1 answer

Error, Loop when pressing ENTER with e.KeyCode Different source code for release / debug version

score 4 · Accepted Answer

You can make an event with the ngClick directive, which will detect the click on the element, see example:

ng-click="btnArea = !btnArea; btnPonto = false"
ng-click="btnPonto = !btnPonto; btnArea = false"

<input type="button" ng-model="btnArea"  ng-click="btnArea = !btnArea; btnPonto = false" value="Áreas">
<input type="button" ng-model="btnPonto" ng-click="btnPonto = !btnPonto; btnArea = false" value="Pontos">

This will create a toggle event by toggling the value between true and false to each click. The second part of ngClick will only leave the value of the other element as false , so it will be hidden when the other one is displayed.

By simplifying your code, how do you want to start the view with% hidden%, your code looks like this:

<div>
   <input type="button" ng-model="btnArea"  ng-click="btnArea = !btnArea; btnPonto = false"   value="Áreas">
   <input type="button" ng-model="btnPonto" ng-click="btnPonto = !btnPonto; btnArea = false" value="Pontos">
</div>

<div ng-if="btnArea">[...]</div>
<div ng-if="btnPonto">[...]</div>

See your updated example .