没有功能

Question

<body ng-app="workApp">
<div ng-controller="firstClaimController">
<input type="checkbox" ng-click="sbcfunction()"> Option 1
<input type="checkbox" ng-click="sbcfunction()"> Option 2
<input type="checkbox" ng-click="sbcfunction()"> Option 3
<input type="checkbox" ng-click="sbcfunction()"> Option 4

            {{myValue}}
        </div>

    <script type="text/javascript" >
        var claimController = angular.module('workApp', []); 
        claimController.controller('firstClaimController', function($scope){
    // Test the controller whether it works
        $scope.myValue = "asdf";
    // 
            $scope.sbcfunction = function () {

            };
    });
    </script>

以上是我的代码，我有4个复选框。目标是选项1是单选，选项2-4是多选。如果选择了选项1，则应自动取消选择选项2-4。如果选择选项2-4，则应取消选择选项1.

使用angularjs寻找更好的解决方案。

Answer 1

使用ng-change。

没有功能

这应该按照你想要的方式工作：

<label><input type="checkbox" ng-model="option1" ng-change="multiOption1=multiOption1&&!option1;multiOption2=multiOption2&&!option1;multiOption3=multiOption3&&!option1"> Option 1</label>
<label><input type="checkbox" ng-model="multiOption1" value="option2" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 2</label>
<label><input type="checkbox" ng-model="multiOption2" value="option3" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 3</label>
<label><input type="checkbox" ng-model="multiOption3" value="option4" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 4</label>

Example

带功能

如果您更喜欢使用功能，可以这样做：

在你的控制器中添加：

$scope.option1=true;
$scope.option1Changed=function(){
    $scope.multiOption1=$scope.multiOption1&&!$scope.option1;
    $scope.multiOption2=$scope.multiOption2&&!$scope.option1;
    $scope.multiOption3=$scope.multiOption3&&!$scope.option1;
}
$scope.multiOptionsChanged=function(){
    $scope.option1=!($scope.multiOption1||$scope.multiOption2||$scope.multiOption3);
}

在你看来这样做：

<input type="checkbox" ng-model="option1" ng-change="option1Changed()"> Option 1
<input type="checkbox" ng-model="multiOption1" value="option2" ng-change="multiOptionsChanged()"> Option 2
<input type="checkbox" ng-model="multiOption2" value="option3" ng-change="multiOptionsChanged()"> Option 3
<input type="checkbox" ng-model="multiOption3" value="option4" ng-change="multiOptionsChanged()"> Option 4

Angular JS具有特定的选择复选框

1 个答案:

没有功能

Example

带功能

Example