AngularJS: How to change radio button view when model changes?

Question

Consider the HTML as

<div class="btn-group col-lg-3" data-toggle="buttons" data-ng-model="transaction.debit" required>
    <label class="btn btn-default" data-ng-click="setDebitTransaction('true')">
      <input type="radio">Debit
    </label>
    <label class="btn btn-default" data-ng-click="setDebitTransaction('false')">
      <input type="radio">Credit
    </label>

<div>

and my Controller looks like

$scope.transaction = {};
  $scope.setDebitTransaction = function(value) {
    $scope.transaction.debit = value;
    console.log('Debit = ', $scope.transaction.debit);
  };

What I want?
- When I click on radio button I see that the $scope.transaction.debit is correctly set and that the corresponding radio button is enabled
- But when my model changes its value from backend processing, I see that $scope.transaction.debit is correctly set but corresponding radio element is not enabled

Question - How can I enable the radio button based on value in $scope.transaction.debit?

DEMO

I have put this on plunker

sabhiram · Accepted Answer · 2014-05-18 19:53:22Z

1

I assume what you are trying to do is get the appropriate button in the btn-group to change its state to "active" (bootstrap style class). To do this, there are probably a million ways, here is one:

Use the ng-class directive in angular, to inject a class to the btn div, based on some $scope attribute (in your case $scope.transaction.debit).

Here is how that might look in code:

<label class="btn btn-default" ng-class="{'active': transaction.debit}" data-ng-click="setDebitTransaction('true')">
  <input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{'active': !transaction.debit}" data-ng-click="setDebitTransaction('false')">
  <input type="radio">Credit
</label>

Updated plunker.

answered May 18, 2014 at 19:53

sabhiram

9077 silver badges10 bronze badges

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

Comments

Jerrad · Accepted Answer · 2014-05-18 19:49:32Z

1

Set the active class via ng-class on your labels like so:

<label class="btn btn-default" ng-class="{active: transaction.debit}" data-ng-click="setDebitTransaction('true')">
      <input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{active: !transaction.debit}" data-ng-click="setDebitTransaction('false')">
      <input type="radio">Credit
</label>

Plunker here: http://plnkr.co/edit/tUzF4J9ixEnKxLNdI1Bm

answered May 18, 2014 at 19:49

Jerrad

5,3001 gold badge20 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS: How to change radio button view when model changes?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related