带有特定选择复选框的Angular JS
带有特定选择复选框的Angular JS
提问于 2014-10-31 11:49:35
<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寻找更好的解决方案。
回答 1
Stack Overflow用户
发布于 2014-10-31 12:06:25
使用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 4Example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26667260
复制相关文章
相似问题
腾讯云开发者
