CODEWITHSUNDEEP
javascriptangularjsradio-button
Edin Puzic
Edin Puzic

Reputation: 1048

Radio Buttons with different ng-models

Hi I have three radio input fields with same name but different ng-models:

<label>
    <input type="radio"name="deliveryAddress" 
           ng-model="CC.OrderDetailsModel.IsNewDeliveryAddress">
    Save address to profile for use on future orders
</label>

<label>
    <input type="radio"name="deliveryAddress" 
           ng-model="CC.OrderDetailsModel.ExistingDeliveryAddressUpdate">
    Update Existing Delivery Address
</label>

<label>
    <input type="radio"name="deliveryAddress" 
           ng-model="CC.OrderDetailsModel.UseForThisOrderOnly">
    Use address only for this order
</label>

I want to make when input is check that has value true otherwise false

Of this three ng-model only one can have true value. Something like this:

CC.OrderDetailsModel.IsNewDeliveryAddress: false,
CC.OrderDetailsModel.ExistingDeliveryAddressUpdate: false,
CC.OrderDetailsModel.UseForThisOrderOnly: true

Upvotes: 0

Views: 653

Answers (2)

Mistalis
Mistalis

Reputation: 18279

I would suggest to use only one variable for all your radio button, as adviced by Angular for input[radio]:

<input type="radio" name="deliveryAddress" ng-model="deliveryAddress" value="newDeliveryAddress"/>
<input type="radio" name="deliveryAddress" ng-model="deliveryAddress" value="existingDeliveryAddressUpdate"/>
<input type="radio" name="deliveryAddress" ng-model="deliveryAddress" value="useForThisOrderOnly"/>

Here is just change the value set in ng-model. You can then do your treatment based on this value.

Try it on Plunker

Upvotes: -1

Mistalis
Mistalis

Reputation: 18279

As you explained in comments if you want to keep your logic, you can add a ng-change event on your inputs to set values:

<label>
   <input type="radio" name="deliveryAddress" 
          ng-model="CC.OrderDetailsModel.IsNewDeliveryAddress"
          ng-change="change(CC.OrderDetailsModel.IsNewDeliveryAddress)">
   Save address to profile for use on future orders
</label>

<label>
   <input type="radio" name="deliveryAddress" 
          ng-model="CC.OrderDetailsModel.ExistingDeliveryAddressUpdate"
          ng-change="change(CC.OrderDetailsModel.ExistingDeliveryAddressUpdate)">
   Update Existing Delivery Address
</label>

<label>
   <input type="radio" name="deliveryAddress" 
          ng-model="CC.OrderDetailsModel.UseForThisOrderOnly"
          ng-change="change(CC.OrderDetailsModel.UseForThisOrderOnly)">
   Use address only for this order
</label>

The change() function will set variables to false and then the selected one to true:

$scope.change = function(changed) {
    CC.OrderDetailsModel.IsNewDeliveryAddress = false;
    CC.OrderDetailsModel.ExistingDeliveryAddressUpdate = false;
    CC.OrderDetailsModel.UseForThisOrderOnly = false;
    changed = true;
}

Upvotes: 2

Related Questions