getting value from angular radio buttons

Question

I am trying to follow the angular docs for radio buttons. https://docs.angularjs.org/api/ng/input/input%5Bradio%5D Don't know what I'm doing wrong.

Ultimately, I want the div "stuff" to have class "muted" if radio option 3 is selected.

my html:

<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" >

    [{{shippingVm.shipOption.val}}]

    <div class="col-sm-3 col-sm-offset-1">
        <label class="radio-inline">
           <input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" />
           I will call Purolator for a pickup.
        </label>
    </div>
    <div class="col-sm-3">
        <label class="radio-inline">
            <input type="radio"  ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" />
            I will deliver them to Purolator.
        </label>
    </div>
    <div class="col-sm-4">
        <label class="radio-inline">
            <input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" />
            I will deliver them to the Wizmo warehouse myself.
        </label>
    </div>

    <div class="ng-class="shippingVm.shipOption.val">
        stuff
    </div>

</form>

my controller:

vm.shipOption = {val: "NOT-muted"};

This debugging line in the HTML checks to see if I'm getting the right value:

[{{shippingVm.shipOption.val}}]

It starts with [NOT-muted] - as it should. But the moment I select any radio button it goes blank.

According to the docs, clicking a radio should pass the radio's value into the model.

What am I missing?

ScottL · Accepted Answer · 2016-07-07 01:47:47Z

Your ng-class is incorrect. See the below snippet for an example of what it should be. The second problem is that you want value instead of ng-value. From: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

value The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).

ngValue Angular expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).

.muted {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <label>Chicken or the Egg?</label>
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
      </label>
    </div>
  </div>
  <div ng-class="{'muted': formData.chickenEgg === 'egg'}">
    stuff
  </div>
</div>

Peter · Accepted Answer · 2018-05-02 10:54:47Z

0

Oh, I see it now.

The radio buttons should have value="muted" not ng-value="muted".

ng-value is only used in a special case.

edited May 2, 2018 at 10:54

Peter

6,6994 gold badges33 silver badges36 bronze badges

answered Jul 7, 2016 at 1:34

DaveC426913

2,0386 gold badges37 silver badges63 bronze badges

Collectives™ on Stack Overflow

getting value from angular radio buttons

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