Question

我遇到问题，因为我在div中有一个复选框，我想在两种情况下调用一个函数：如果我们更改复选框值或单击div

现在的问题是，当我点击复选框时，该事件被触发两次，我没有得到预期的结果。

<div ng-click="checkEntry(config.id)"><input type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></div>

$scope.checkEntry = function(id){
    var idx = $scope.someArray.indexOf(id);
    if(idx === -1){
        $scope.someArray.push(id);
    }else{
        $scope.someArray.splice(idx, 1);
    }
}

现在，如果我点击div，它工作正常，复选框被选中。但是，如果我单击checkBox，该函数将被调用两次，并且它不能按预期工作。

请帮我解决问题

Answer 1

对于两个相同的事件，您不需要两个事件处理程序。当您单击输入时，也会单击该div。所以你只需要从你的代码中删除ng-change。

<div ng-click="checkEntry(config.id)">test
<input type="checkbox" ng-model="modelCheckbox" ng-checked="checked">

在你的控制器中：

$scope.checked = true;
$scope.checkEntry = function(id){
    $scope.checked = !$scope.checked;
}

查看this plunker

Answer 2

复选框位于该div的内，因此当您单击复选框时，您实际上也在单击div。实际上，在您的情况下，您可以从复选框中删除 ng-change 属性，它仍然有效，因为无论如何都会通过点击div来调用函数。但这不是使用复选框的正确方法！

这里的第一个问题是你真的需要那个div吗？我宁愿使用标签代替：

<label for="my-checkbox"><input id="my-checkbox" type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></label>

在这种情况下它会正常工作，你只需要编写适当的CSS来正确地标记该标签。这是最好和最正确的解决方案。

在嵌套div中使用ng-click重复触发事件

2 个答案: