Show and hide directives using buttons with angular

Question

I have three directives that displays different data in my main view.

     <div>
        <sales-view></sales-view>
    </div>

     <div>
         <units-view></units-view>
     </div>

And a set of buttons like this:

     <div class="btn-group">
         <button class="btn btn-primary" type="button">Sales</button>
         <button class="btn btn-white" type="button">Units</button>
     </div>

What I want is to show or hide my directives depending on the user selection, but I dont know how to achive this, I dont know if the logic goes in the controller or in the directive.

Some help will be great, Im stuck with this.

Answer 1

I can understand your point.I think this simple logic can write directly in template html.And if is going to complex, please use a config map(or getter setter) instead.

<!-- edit html -->
<div>
    <sales-view ng-show="showData == 1"></sales-view>
</div>
<div>
    <units-view ng-show="showData == 2"></units-view>
</div>

<div class="btn-group">
    <button class="btn btn-primary" type="button" ng-click="showData = 1">Sales</button>
    <button class="btn btn-white" type="button" ng-click="showData = 2">Units</button>
</div>