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-value =“{if（true）then TrueVal else 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
    };        
}]);

带复选框行为的广播

1 个答案: