Question

我有两个复选框。如果单击复选框B，则也必须选中复选框A.但在我的代码中，当我单击复选框B时，也会选中复选框A.但是复选框A的ng模型并没有将它的值从false更改为true。有人可以帮我弄这个吗？先感谢您！以下是我的代码:(尝试运行代码段）

＆＃13;

<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) {
	    $scope.box1 = false;
            $scope.box2 = false;
            });
    </script>

＆＃13;

Answer 1

一个解决方案是将change事件处理程序附加到第二个checkbox并更改此方法中的box1's范围。

＆＃13;

<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) {
	    $scope.box1 = false;
            $scope.box2 = false;
            $scope.change=function(){
               $scope.box1=$scope.box2;
            }
            });
    </script>

＆＃13;

一条建议：

ng-model和ng-checked并非意味着一起使用。

ng-checked期待一个表达式，所以通过说ng-checked="true"，你基本上会说我的复选框总会被检查。

您应该只能使用ng-model绑定到模型上的boolean属性。

Answer 2

您可以在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>

Answer 3

将同一变量传递到两个输入框的ng-model

＆＃13;

<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) {
	    $scope.box1 = false;
            $scope.box2 = false;
            $scope.onChange= function(){
              $scope.box1= $scope.box2;    
            }; 
            });
           
    </script>

＆＃13;

Answer 4

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

Answer 5

@Commercial Suicide有一个很好的答案。我还发现了另一种使用较少逻辑的方法。请检查以下代码：

＆＃13;

<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) {
	    $scope.box1 = false;
            $scope.box2 = false;
            
            $scope.click = function () {
                $scope.box1 = $scope.box2;
            };
            });
    </script>

＆＃13;

AngularJS - 如何通过选中另一个复选框将复选框的值设置为true？

5 个答案: