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

问题描述：

我有两个复选框。如果您单击复选框B，则也必须选中复选框A.但在我的代码中，当我点击复选框B时，复选框A也被选中。但复选框A的ng模型不会将其值从false更改为true。有人可以帮我弄这个吗？先谢谢你！这里是我下面的代码：（尝试运行的代码片段）AngularJS - 如何通过选中另一个复选框来将复选框的值设置为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>

答

@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>

答

通相同的变量为两个输入框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>

好一点，但复选框中需要有一个独立的变量，因为它可以在不复选框B. Only选择B的帮助下进行检查是依赖于复选框A. –

@JPDolocanog更新了我的答案。 –

答

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

这就是我现在意识到的。我一直被这个问题所迷惑。因为我将这些值存储到我的数据库中，所以我确实需要更新ng模型。 –

答

一种解决方案可以在一个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属性。

感谢您的回答@ alexandru-lonut Mihai。我也发现了类似的方法。 –

@JPDolocanog，ng-checked不会改变ng-model ..所以你必须手动完成。 –

@ Alexandru-lonutMihai注意到。感谢您提供丰富的建议！ –

答

您可以添加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>

感谢您的回答@商业自杀。我在编辑之前发布了我的答案。但仍然是一个很好的答案。 –

@JPDolocanog，谢谢，很高兴听到，它有帮助 –

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

相关推荐