單選按鈕不同的NG-車型

Question

您好我有相同的名稱但不同的NG-模型三個單選輸入字段：

<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 

Answer 1

我會建議使用只有一個變量你所有的單選按鈕，爲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-模型value集。然後你可以根據這個值做你的治療。

Try it on Plunker

Answer 2

正如你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; 
}