【问题标题】：Radio Buttons with different ng-models具有不同 ng 模型的单选按钮
【发布时间】：2017-05-22 23:07:14
【问题描述】：

您好，我有三个名称相同但 ng-model 不同的无线电输入字段：

<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>

我想在输入时检查是否具有值true 否则为false

在这三个ng-model 中，只有一个可以具有true 值。像这样的：

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

【问题讨论】：

标签： javascript angularjs radio-button

【解决方案1】：

当你explained in comments 时，如果你想保持你的逻辑，你可以在你的输入上添加一个ng-change 事件来设置值：

<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>

change() 函数会将变量设置为false，然后将选定的变量设置为true：

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

【讨论】：

【解决方案2】：

我建议您对所有单选按钮只使用一个变量，如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"/>

这里只是更改 ng-model 中的 value 设置。然后您可以根据此值进行治疗。

Try it on Plunker

【讨论】：