Satyadev Satyadev - 3 months ago 15
AngularJS Question

How to show different data on button click in angular

I have two buttons and I am trying to show different data based on clicking particular button(ng-click)

Update: I have a thrid button which is not working with

data-ng-click="search.status = 'OPEN';Data1=true;"


<div ng-app="myApp">
<p class="description">Click on the "show"-link to see the content.</p>
<li ><a data-ng-click="Data1=true;Data2=false" href="">ALL PROJECTS</a></li>
<li ><a data-ng-click="Data2=true;Data1=false" href="">NOTIFICATIONS</a></li>
<li ng-if="role === 'admin'" ><a data-ng-click="search.status = 'OPEN' , Data1=true;" href="">SAVED PROJECTS</a></li>

<div class="wrapper" ng-controller="myCtrl">
<h2 ng-hide=Data2 ng-show="Data1">This is mah Data1, yo!</h2>
<h2 ng-hide=Data1 ng-show="Data2">This is mah Data2, yo!</h2>
</div>
</div>


Update2: This is my actual list data

<ul class="list_of_projects row">
<li ng-show="Data1" ng-repeat="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10">
<a href="">
<h4>{{wd.name}}</h4>
</a>
<p>Status: {{wd.status}}</p>
</li>
<li ng-show="Data2">Data2</li>
</ul>
<dir-pagination-controls boundary-links="true"></dir-pagination-controls>


How do I hide data of first button(Data1) when I click on second(Data2) and viceversa

Answer

UPDATED In that case you do need two booleans :

<div class="wrapper" ng-controller="myCtrl">
    <li ><a data-ng-click="Data1=true;Data2=false" href="">ALL PROJECTS</a></li>
    <li ><a data-ng-click="Data2=true;Data1=false" href="">NOTIFICATIONS</a></li>
    <li  ng-if="role === 'admin'" ><a data-ng-click="search.status = 'OPEN'; Data1=true;" href="">SAVED PROJECTS</a></li>

    <h2 ng-show="Data1">This is mah Data1, yo!</h2>
    <h2 ng-show="Data2">This is mah Data2, yo!</h2>
</div>

Make sure you put the buttons and data in the same controller to prevent scoping issues.

Check out working example in Plunker

Comments