在angularjs中用两个复选框控制一个div答案

【问题标题】：Control a div with two checkboxes in angularjs在angularjs中用两个复选框控制一个div
【发布时间】：2017-05-08 17:25:46
【问题描述】：

我正在学习 AngularJs，非常感谢任何帮助，尝试显示已检查的 div 内容，如果没有检查，则应显示具有“选定”类名的 div。

<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);
// });

});

【问题讨论】：

在这里plnkr.co/edit/xz1RCPnjMMXg2aoRa00N?p=preview

标签： javascript angularjs

【解决方案1】：

如果您检查 if 条件，您现有的逻辑将起作用

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

在 checkbox1Func 和 checkbox2Func 两个函数中。

【讨论】：

【解决方案2】：

将检查包装在一个函数中并在 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

演示

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="angular.js@1.4.x" 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>

【讨论】：