Toggle Content based on button click in a view

Question

I have a small angular app going and I'm stuck on something that seems so simple! (New to angular here).

Scenario: I have two buttons on the page that should toggle the display of their associated content.

Few things need to happen:

Buttons: 1. Should be an active button on page load (also displaying its appropriate content) 2. When other button is clicked, this should change the active state (for button and associated content) 3. If active button is clicked, nothing should happen. It should stay active.

Can't figure out how to do this. All help is appreciated.

Code

<div class="toggle-btns">
  <button class="toggle-btns__btn toggle-btns__btn--active">Button 1</button>
  <button class="toggle-btns__btn" >Button 2</button>
</div>
<div class="content-one">
  <!-- content here -->
</div>
<div class="content-two">
  <!-- content here -->
</div>

@rblakeley If I had an option, I'd mess with React. Unfortunately though, Angular is apart of the project requirements. — patrick, Aug 14 '15 at 03:11

score 3 · Accepted Answer · answered Aug 14 '15 at 03:11

3

If you can't figure this out, you clearly haven't tried very hard ;)

I'd do something like this:

<div class="toggle-btns">
  <button class="toggle-btns__btn" ng-click="content = 1" ng-class="{  toggle-btns__btn--active: content == 1}">Button 1</button>
  <button class="toggle-btns__btn" ng-click="content = 2" ng-class="{  toggle-btns__btn--active: content == 2}">Button 2</button>
</div>
<div class="content-one" ng-show="content == 1">
  <!-- content here -->
</div>
<div class="content-two" ng-show="content == 2">
  <!-- content here -->
</div>

In your controller:

angular.module('Blah')
  .controller('MainCtrl', ['$scope', function($scope) {
      $scope.content = 1;
});

answered Aug 14 '15 at 03:11

opticon

3,494
5
37
61

Thanks for this. I've spent a lot of time reading up on how Angular manages scope and events and what not to try and create something that manages state of both buttons. I'm pretty new to Angular so just trying to wrap my head around a bit while trying ot make something small work :) – patrick Aug 14 '15 at 03:12
It definitely takes some time to get the hang of - it requires a pretty thorough re-thinking of how you approach creating web apps. [This SO post](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) definitely shed some light on things for me. – opticon Aug 14 '15 at 03:17
Definitely True. Just curious, why does this only work with integer values and not strings or "labels". Maybe its just a pet peeve but evaluating arbitrary integers seems a bit dirty, no? Not judging your coding style but the rationale behind the code is all :) – patrick Aug 14 '15 at 03:18
It definitely should work with strings or labels. `content` above could be string literals, for sure. That's just how I threw the example together. If semantic labeling makes sense for you, give'r a shot. – opticon Aug 14 '15 at 03:23
Worth noting that my BEM syntax seems to break within the `ng-class` conditional check unless it has quotes around it. – patrick Aug 14 '15 at 03:46

score 1 · Answer 2 · answered Aug 14 '15 at 03:24

1

There are literally 1 000 000 ways of doing that. One way of using data binding in view:

<div class="toggle-btns" ng-init="active = true">
  <button ng-click="active = true" class="toggle-btns__btn toggle-btns__btn--active">Button 1</button>
  <button ng-click="active = false" class="toggle-btns__btn" >Button 2</button>
  </div>

  <div ng-if="active" class="content-one">
    <!-- content here -->
    <p>content1</p>
  </div>
  <div ng-if="!active" class="content-two">
    <!-- content here -->
    <p>content2</p>
  </div>

Plnkr here: http://plnkr.co/edit/bVK9VUum7KRLNccgPc5D?p=preview

answered Aug 14 '15 at 03:24

JanisP

1,233
15
16

In this instance, how would we apply the 'active' class to the appropriate buttons"? Definitely understanding how this works now to toggle content so thanks for that, but not entirely sure how a state of true (which both evaluate to) allows us to set an active class for the appropriate button? – patrick Aug 14 '15 at 03:33
Basically the same as previous example: ng-class="{ toggle-btns__btn--active: active}"> and for second button ng-class="{ toggle-btns__btn--active: !active}"> – JanisP Aug 14 '15 at 03:58

Toggle Content based on button click in a view

Code

2 Answers2