在angularjs中控制一个带有两个复选框的div

我正在学习AngularJs，任何帮助都非常感谢，试图显示检查的div内容，如果没有检查到应该出现“selected”类名的div。如果您检查，如果条件在angularjs中控制一个带有两个复选框的div

if($scope.aCheck === false && $scope.bCheck===false){ 
    $scope.selected=true; 
}

两者的功能checkbox1Func和checkbox2Func内

<body ng-controller="MainCtrl"> 
<p>Hello {{name}}!</p> 
<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func()">A 
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func()">B 

<div ng-if="selected">Hello from div container</div> 

<div ng-if="aCheck">Hello from checkbox1</div> 
<div ng-if="bCheck">Hello from checkbox2</div> 
</body> 

</html>

和脚本

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
$scope.name = 'World'; 
$scope.selected=true; 

$scope.checkbox1Func=function(a){ 
$scope.selected=false; 
}; 
$scope.checkbox2Func=function(b){ 
$scope.selected=false; 
}; 

if($scope.aCheck === false && $scope.bCheck===false){ 
$scope.selected=true; 
} 

// $('.myCheckbox').click(function() { 
//  $(this).siblings('input:checkbox').prop('checked', false); 
// }); 

});

来源

2017-05-08 Praveen

plunker这里https://plnkr.co/edit/xz1RCPnjMMXg2aoRa00N?p=preview – Praveen

您现有的逻辑将起作用。

来源

2017-05-08 02:26:59

的作品@Hecktor，谢谢 – Praveen

裹在函数内部的检查，并调用它的NG-change事件，

$scope.valid = function() { 
    if ($scope.aCheck === false && $scope.bCheck === false) { 
     $scope.selected = true; 
    } 
    }

HTML

<input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func();valid();">A 
<input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func();valid();">B

DEMO

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.selected = true; 
 

 
    $scope.checkbox1Func = function(a) { 
 
    $scope.selected = false; 
 
    }; 
 
    $scope.checkbox2Func = function(b) { 
 
    $scope.selected = false; 
 
    }; 
 
    $scope.valid = function() { 
 
    if ($scope.aCheck === false && $scope.bCheck === false) { 
 
     $scope.selected = true; 
 
    } 
 
    } 
 
    
 

 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <input type="checkbox" class="myCheckbox" ng-model="aCheck" ng-change="checkbox1Func();valid();">A 
 
    <input type="checkbox" class="myCheckbox" ng-model="bCheck" ng-change="checkbox2Func();valid();">B 
 
    <div ng-if="selected">Hello from div container</div> 
 
    <div ng-if="aCheck">Hello from checkbox1</div> 
 
    <div ng-if="bCheck">Hello from checkbox2</div> 
 
    </body> 
 

 
</html>

来源

2017-05-08 02:29:33 Sajeetharan

感谢您的时间 – Praveen

@praveenuics标记为答案，如果它帮助 – Sajeetharan

在angularjs中控制一个带有两个复选框的div

回答

相关问题