How to change the color of the buttons when selecting an input radio?

Navigation
4

I have this form

WhenIdialthe"Accounts Payable" radio input, I need the buttons to turn red.

I'm using AngularJS, so I used ng-if , but the code was pretty extensive.

How could you do this in a simpler way?

    
asked by anonymous 13.12.2016 / 10:20

1 answer

6

You do not need to use ng-if in this case. You can create a parent class for your buttons inside. When the checkbox is enabled, you use ng-class to add a class to the parent container in case the desired checkbox is selected.

So this would affect the buttons. 

angular.module('app', [])
.container-btn .btn{
  background: green;
  border:none;
  border-radius:4px;
  padding:10px;
  color:white;
}

.container-btn.marked .btn{
   background: red;
   
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app" ng-init="a_pagar=false">
    <div>
        <label>
            <input type="radio" ng-value="true" ng-model="a_pagar">
            Contas a pagar
        </label>
        <label>
            <input type="radio" ng-value="false" ng-model="a_pagar">
            Contas a pagar
        </label>
    </div>

    <div class="container-btn" ng-class="{'marked' : a_pagar}">
        <button class="btn">Vencidos</button>
        <button class="btn">Hoje</button>
    </div>
</div>

Note that the container-btn class affects the button that has the btn class. If the checkbox is checked, class 'marked é adicionada a container-btn'.

For you to understand better, ng-class is for you to add classes dynamically by Angular. You need to set a Objeto with indexes containing an expression. If the expression evaluates to true, the index value will be added to the element class.

You can read more about ng-class in documentation ;

    
13.12.2016 / 13:53
Failed to compare dates before writing to bank How to add a font to a select?