處理多個單選按鈕

Question

此處「idDefault」值不會更改。請幫幫我。

<div class="form-group" > 
<label class="control-label">Select Colors : </label> 
<div ng-repeat = "color in colorlist"> 
<input type="radio" name="color" ng-value="true" ng-model="color.idDefault"> 
{{color.colorName}} </input> 
</div> 

顏色：{{colorlist}}

和我的JSON是

$scope.colorlist = [ 
{ 
    colorName:'Black', 
    idDefault:true}, 
{ 
    colorName:'Red', 
    idDefault:false} , 
    { 
    colorName:'Bule', 
    idDefault:false} , 
    { 
    colorName:'Yellow', 
    idDefault:false} , 
    ]; 

選擇最初的黑色。選擇其他顏色時，黑色的默認值不會變爲假。

Answer 1

首先，因爲您正在使用單選按鈕的顏色列表，因此您可以使用複選框列表。

查看代碼 -

<div class="form-group" > 
<label class="control-label">Select Colors : </label> 
<div ng-repeat = "color in colorlist"> 
    <input type="radio" name="color" ng-change="changed(color)" ng- value="true" ng-model="color.idDefault"/> 
{{color.colorName}} 
</div> 
Colors : {{colorlist}} 

和控制器添加了一個方法 - -

$scope.changed=function(color){ 
for(var i=0;i<$scope.colorlist.length;i++) 
if($scope.colorlist[i].colorName!==color.colorName){ 
$scope.colorlist[i].idDefault=false; 
} 
} 

但是，如果你想使用這樣而已，你可以通過它加入ng-change喜歡做檢查fiddle

希望它能爲你工作。

Answer 2

上面嘗試使用的方法用於複選框，您可以在其中選擇多個值，但此時只希望選擇一種顏色。

你可以以此爲，

<div class="form-group" > 
<label class="control-label">Select Colors : </label> 
<div ng-repeat = "color in colorlist"> 
    <input type="radio" name="color" ng-value="color" ng-model="selectedColor"> 
    {{color.colorName}} 
    </input> 
</div> 

這樣你可以得到你的位指示所選擇的顏色在$scope.selectedColor變量。