收音機複選框行爲

Question

的角度

一個簡單的問題，我想創建充當複選框 我有這樣的代碼

<div ng-app="TestApp"> 
    <div ng-controller="TestCtrl"> 
     {{ dataItem | json }} 

     <br /><br /> 

     <input type="radio" 
       id="isHuman_{{$id}}" 
       name="RecDem" 
       ng-value="TrueVal" 
       ng-model="dataItem.IsHuman" /> 
     <label for="isHuman_{{$id}}">Human</label><br /> 

     <input type="radio" 
       name="RecDem" 
       id="isAlien_{{$id}}" 
       ng-value="TrueVal" 
       ng-model="dataItem.IsAlien" /> 
     <label for="isAlien_{{$id}}">Alien</label><br /> 
    </div> 
</div> 

一個單選按鈕，這個JS

var app = angular.module('TestApp', []); 

app.controller('TestCtrl', ['$scope', function($scope){ 
    $scope.dataItem = { 
     IsHuman : false, 
     IsAlien : false 
    }; 

    $scope.TrueVal = true; 
    $scope.FalseVal = false; 
}]); 

但當我改變收音機的狀態時，首先，它起到正常的作用，但在第二次點擊後，沒有事件觸發

也許我錯過的東西在NG值= 「{如果（真），那麼TrueVal其他FalseVal}」

任何幫助，將不勝感激..

這裏有一個小提琴http://jsfiddle.net/0701k7ke/4/

TIA

Answer 1

如果我正確理解您的問題，您需要使用ng-checked屬性而不是ng-model屬性作爲ng-checked屬性允許用於檢查/取消選中單選按鈕（類似於行爲複選框）。並使用ng-click屬性來設置對象。

所以你HTML應該是：

<div ng-app="TestApp"> 
    <div ng-controller="TestCtrl"> 
     {{ dataItem | json }} 

     <br /><br /> 

     <input type="radio" 
       id="isHuman_{{$id}}" 
       name="RecDem" 
       ng-checked='dataItem.IsHuman' 
       ng-click="dataItem.IsAlien = false;dataItem.IsHuman=!dataItem.IsHuman;" 
     /> 
     <label for="isHuman_{{$id}}">Human</label><br /> 

     <input type="radio" 
       name="RecDem" 
       id="isAlien_{{$id}}" 
       ng-checked='dataItem.IsAlien' 
       ng-click="dataItem.IsHuman = false;dataItem.IsAlien=!dataItem.IsAlien;" 
     /> 
     <label for="isAlien_{{$id}}">Alien</label><br /> 
    </div> 
</div> 

而且你控制器應該是：

var app = angular.module('TestApp', []); 

app.controller('TestCtrl', ['$scope', function($scope){ 
    $scope.dataItem = { 
     IsHuman : false, 
     IsAlien : false 
    };   
}]);