AngularJS - 如何通過選中另一個複選框來將複選框的值設置爲true？

Question

我有兩個複選框。如果您單擊複選框B，則也必須選中複選框A.但在我的代碼中，當我點擊複選框B時，複選框A也被選中。但複選框A的ng模型不會將其值從false更改爲true。有人可以幫我弄這個嗎？先謝謝你！這裏是我下面的代碼：（嘗試運行的代碼片段）

<div ng-app="myApp" ng-controller="myCtrl"> 
 
    Box a 
 
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br /> 
 
    Box b 
 
    <input type="checkbox" ng-model="box2"> {{box2}} 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script> 
 
    var app = angular.module('myApp', []); 
 
      app.controller('myCtrl', function ($scope) { 
 
\t  $scope.box1 = false; 
 
      $scope.box2 = false; 
 
      }); 
 
    </script>

Answer 1

@Commercial自殺具有良好回答。我還發現了另一種使用較少邏輯的方法。檢查下面的代碼：

<div ng-app="myApp" ng-controller="myCtrl"> 
 
    Box a 
 
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br /> 
 
    Box b 
 
    <input type="checkbox" ng-click="click()" ng-model="box2"> {{box2}} 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script> 
 
    var app = angular.module('myApp', []); 
 
      app.controller('myCtrl', function ($scope) { 
 
\t  $scope.box1 = false; 
 
      $scope.box2 = false; 
 
      
 
      $scope.click = function() { 
 
       $scope.box1 = $scope.box2; 
 
      }; 
 
      }); 
 
    </script>

Answer 2

通相同的變量爲兩個輸入框NG-模型

<div ng-app="myApp" ng-controller="myCtrl"> 
 
    Box a 
 
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br /> 
 
    Box b 
 
    <input type="checkbox" ng-model="box2" ng-change="onChange()"> {{box2}} 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script> 
 
    var app = angular.module('myApp', []); 
 
      app.controller('myCtrl', function ($scope) { 
 
\t  $scope.box1 = false; 
 
      $scope.box2 = false; 
 
      $scope.onChange= function(){ 
 
       $scope.box1= $scope.box2;  
 
      }; 
 
      }); 
 
      
 
    </script>

Answer 3

基本上，ng-checked不會更改$scope.box1的值。 你可以做的是顯示{{box2 || box1}}，而不是{{box1}}

Answer 4

一種解決方案可以在一個change事件處理程序附加到第二checkbox和改變這個方法裏面的box1's範圍。

<div ng-app="myApp" ng-controller="myCtrl"> 
 
    Box a 
 
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br /> 
 
    Box b 
 
    <input type="checkbox" ng-change="change()" ng-model="box2"> {{box2}} 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script> 
 
    var app = angular.module('myApp', []); 
 
       app.controller('myCtrl', function ($scope) { 
 
\t  $scope.box1 = false; 
 
      $scope.box2 = false; 
 
      $scope.change=function(){ 
 
       $scope.box1=$scope.box2; 
 
      } 
 
      }); 
 
    </script>

一單建議：

ng-model和ng-checked沒有意味着使用一起。

ng-checked期待一個表達式，所以通過說ng-checked="true"，你基本上說，複選框將始終被檢查。

您應該只能使用ng-model，綁定到模型上的boolean屬性。

Answer 5

您可以添加BOX2指令ng-change，它將調用的功能，在這裏您可以以編程方式更改BOX1的價值，就像這樣：

<div ng-app="myApp" ng-controller="myCtrl"> 
 
    Box a 
 
    <input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br /> 
 
    Box b 
 
    <input type="checkbox" ng-model="box2" ng-change="checkBox1()"> {{box2}} 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('myCtrl', function ($scope) { 
 
    $scope.box1 = false; 
 
    $scope.box2 = false; 
 
    $scope.checkBox1 = function() { 
 
     $scope.box1 = $scope.box2; 
 
    } 
 
    }); 
 
</script>