javascript - Angular 如何通过单击 div 来检查复选框

Question

我需要通过单击 div“用户检查”来选中/取消选中复选框并调用 doIfChecked(user)。

我可以检查 ng-repeat 中的复选框并调用 doIfChecked。

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

app.controller('cont', ['$scope', function($scope) {
  
$scope.users = {user1:1,user2:2,user3:3};
  
$scope.toggleUserCo = function(user) {
    user.co = !user.co;
}


$scope.doIfChecked = function (array) {

}

}]);

.user_check {
width: 600px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


        <div class="user_check" ng-app="app" ng-controller="cont" >
          
<div class="user_check" ng-app="app" ng-click="toggleUserCo()" ng-repeat="us in users">
    <input type="checkbox" checklist-value="contact" checklist-model="user.co" ng-click="doIfChecked(user)"/>
</div>

Answer 1

假设 user.co 是一些 bool 值，并且 checklist-model 相当于您使用的任何指令中的 ng-model ，可以通过在div上设置ng-click来设置user.co = !user.co

例如:

<div class="user_check" ng-app="app" ng-click="toggleUserCo()">
    <input type="checkbox" checklist-value="contact" checklist-model="user.co" ng-click="doIfChecked(user)"/>
</div>

在你的 Controller 中(或者，基于我没有看到你在 ng-app 内部定义 Controller 的事实，我想这会发生在你把你的逻辑(应该是 Controller 或服务...)):

$scope.toggleUserCo = function() {
    $scope.user.co = !$scope.user.co;
}

编辑

由于这是在 ng-repeat 中，因此您只需将 user 对象传递给 toggleUserCo 函数并对其执行操作即可:

<div class="user_check" ng-app="app" ng-click="toggleUserCo(user)">

还有

$scope.toggleUserCo = function(user) {
    user.co = !user.co;
}