收音机复选框行为

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 
    };   
}]);