CODEWITHSUNDEEP
angularjsradio-button
DaveC426913
DaveC426913

Reputation: 2046

getting value from angular radio buttons

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?

Upvotes: 1

Views: 5296

Answers (2)

DaveC426913
DaveC426913

Reputation: 2046

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.

Upvotes: 0

ScottL
ScottL

Reputation: 1755

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>

Upvotes: 2

Related Questions