Question

我有以下示例（jsFiddle）。我要做的是，如果单击单选按钮，则应取消选中所有复选框，如果单击一个或多个复选框，则应取消选择所有单选按钮。我现在的问题是如何做到这一点（以简单的方式）。

angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {

$scope.select = function(type) {
    alert('type: ' + type);
}

// functions to deselect checkboxes if a radiobutton is selected and vica verse
}]);

非常感谢你的帮助！

My Example

Answer 1

我可以建议您使用ng-checked documentation。

您可以查看fiddle。

<body ng-app="myApp">
    <div ng-controller="TestController">
        <ul class="list-group">
            <li class="list-group-item">
                <input type="radio" name="test1" ng-checked="radio" ng-click="selectRadio()"/>
                <span class="username">
                    Alle von Test1
                </span>
            </li>
            <li class="list-group-item">
                <input type="radio" name="test1" ng-checked="radio" ng-click="selectRadio()"/>
                <span class="username">
                    Alle von Test2
                </span>
            </li>
        </ul>   

        <input type="checkbox" value="Test3" ng-checked="check" ng-click="selectCheck()" />Test3<br />
        <input type="checkbox" value="Test4" ng-checked="check" ng-click="selectCheck()" />Test4<br />
        <input type="checkbox" value="Test5" ng-checked="check" ng-click="selectCheck()" />Test5<br />

    </div>
</body>

Answer 2

我建议您在JavaScript中使用模型作为输入：

angular.module('myApp', [])
    .controller('TestController', ['$scope', function($scope) {

        this.radioBtns = {
            test1: false,
            test2: false
        }
        this.checkboxBtns = {
            test3: false,
            test4: false,
            test5: false
        }

        this.deselect = function(type) {

            angular.forEach( this[ type ], function( el,name ) {

                this[ type ][ name ] = false;

            }.bind(this));

        }
}]);

然后调整html，如小提琴所示： https://jsfiddle.net/zz5z6dor/11/

Answer 3

我回答你的问题有点迟了。我认为这就是你要找的东西。

JSFiddle： https://jsfiddle.net/bx79afyq/2/

<强> HTML：

<div ng-controller="TestController">
        <ul class="list-group">
            <li class="list-group-item">
                <input type="radio" name="test1" ng-click="select('radio')"/>
                <span class="username">
                    Alle von Test1
                </span>
            </li>
            <li class="list-group-item">
                <input type="radio" name="test1" ng-click="select('radio')"/>
                <span class="username">
                    Alle von Test2
                </span>
            </li>
        </ul>   

        <input type="checkbox" value="Test3" ng-click="select('checkbox')" />Test3<br />
        <input type="checkbox" value="Test4" ng-click="select('checkbox')" />Test4<br />
        <input type="checkbox" value="Test5" ng-click="select('checkbox')" />Test5<br />

</div>

<强>的JavaScript

angular.module('myApp', [])
    .controller('TestController', ['$scope', function($scope) {

    $scope.select = function(type) {
       var data = angular.element('input');
       if(type==='radio'){
          angular.forEach(data, function(value, key) {
            if(value.type==='checkbox' && angular.element(value).prop("checked")){
               angular.element(value).prop("checked", false);
             } 
          });
        }

        else if(type==='checkbox'){
           angular.forEach(data, function(value, key) {
              if(value.type==='radio' && angular.element(value).prop("checked")){
               angular.element(value).prop("checked", false);
              }  
           });
        }
    }
}]);

AngularJS选择并取消选中复选框/单选按钮

3 个答案: