AngularJS class toggle on buttons

Question

I'm trying to toggle a class when a button is clicked. IE: if button 'rndTotal' is selected, class "selected" is added, and the other buttons have class "selected" removed. I also need this approach to work with my controller, as in, I will have stuff happen based on what is selected.

So far I have:

      <div class="row optionRow" ng-init="option = 'exact'" >
        <div class="col">
          <button ng-class="{selected:option=='exact'}">Exact</button>
        </div>
        <div class="col">
          <button ng-class="{selected:option=='rndTip'}">Round Tip</button>
        </div>
        <div class="col">
          <button ng-class="{selected:option=='rndTotal'}">Round Total</button>
        </div>
      </div>

It defaults to 'exact' but doesn't function other than that.

At the moment...nothing. I was trying to figure out what is the best method to then reference in my controller. — nightowl
– nightowl, Commented Jun 2, 2016 at 21:03
Not answering the question, but this directive does exactly what you need. (If you want to include another dependency in your project, off course). — Gabriel Hobold
– Gabriel Hobold, Commented Jun 2, 2016 at 21:04
you could try replacing select($index) with select('exact') for example, and then have $scope.select assign the argument ('exact') to the variable $scope.option. — OzW
– OzW, Commented Jun 2, 2016 at 21:06

Lex · Accepted Answer · 2016-06-02 21:37:09Z

1

This feels like a hack, but to accomplish what you're after you could do this:

<div class="row optionRow" ng-init="option = 'exact'" >
    <div class="col">
        <button ng-class="{selected:option=='exact'}" ng-click="option='exact'">Exact</button>
    </div>
    <div class="col">
        <button ng-class="{selected:option=='rndTip'}" ng-click="option='rndTip'">Round Tip</button>
    </div>
    <div class="col">
        <button ng-class="{selected:option=='rndTotal'}" ng-click="option='rndTotal'">Round Total</button>
    </div>
</div>

Update

Instead of setting model values directly in the markup like this, I would move to using a controller. In order to do that I would make the following changes:

Controller

.controller('myController', function() {
    var vm = this;
    vm.selectedOption = 'exact';
    vm.selectOption = function(option) {
        vm.selectedOption = option;
        // do anything else you may need to do when the selected option changes
    };
});

Markup:

<div ng-controller="myController as vm">
    <div class="row optionRow">
        <div class="col">
            <button ng-class="{selected:vm.selectedOption==='exact'}" ng-click="vm.selectOption('exact')">Exact</button>
        </div>
        <div class="col">
            <button ng-class="{selected:vm.selectedOption==='rndTip'}" ng-click="vm.selectOption('rndTip')">Round Tip</button>
        </div>
        <div class="col">
            <button ng-class="{selected:vm.selectedOption==='rndTotal'}" ng-click="vm.selectOption('rndTotal')">Round Total</button>
        </div>
    </div>
</div>

edited Jun 2, 2016 at 21:37

answered Jun 2, 2016 at 21:23

Lex

7,2732 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nightowl Over a year ago

This seems to work perfectly. Could you ELI5 why you (1) think it's hacky, and (2) why this solution even works? I am pretty new to Angular so I'm trying to figure out the best way to do things.

Lex Over a year ago

I don't like to set model values directly in the markup like this. I prefer to use the controller for things like this. I'll update my answer with how I would approach this.

nightowl Over a year ago

This is perfect. Thank you for the explanation and providing your preferred method.

Lex Over a year ago

@nc45 I just realized that I didn't explain why the first answer works. When you use ng-init="option = 'exact'" you are implicitly creating a model property named option. I took advantage of this and just directly set the value of that model property in the ng-click event of each button. Hopefully that makes sense.

Collectives™ on Stack Overflow

AngularJS class toggle on buttons

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest