Question

我已经定义了一个具有名称和复选框的简单行。我将名称和复选框绑定到角度数据，但我现在正尝试单击一行以反转复选框绑定数据的值，并仍然允许用户单击复选框

这是我的HTML

<div class="container" ng-controller="officeController" ng-cloak>
    <div class="row" ng-repeat="employee in office" ng-click="toggleStatus(employee)">
        <div class="col-md-1">
            <img ng-src="{{employee.imageUrl}}" style="width: 50px; height: 50px;"/>
        </div>
        <div class="col-md-7" ng-click="alert('hello')">
            {{employee.name}}
        </div>
        <div class="col-md-4">
        <input type="checkbox" ng-model="employee.inOffice" ng-click="toggleCheckbox($event)"/>
        </div>
    </div>
</div>

这是我的控制器

officeModule.controller("officeController", function ($scope, officeRepository) {
    $scope.office = officeRepository.get(),
    $scope.toggleStatus = function (employee) {
        console.log('onClick' + new Date());
        console.log('Original: ' +employee.id + ', "' + employee.name + '", ' + employee.inOffice);
        employee.inOffice = !employee.inOffice;
        console.log('Modified: ' + employee.id + ', "' + employee.name + '", ' + employee.inOffice);
    };
    $.toggleCheckbox = function($event) {
        $event.stopPropagation();
    }
});

employee对象是从简单的api调用（控制器上的officeRepository）返回的数据

我已经尝试过只选中了复选框，但我似乎无法按照我想要的方式运行所有内容

我做错了什么？

更新

如果单击该行，则复选框的状态将正确反转。但是，如果我直接单击该复选框，则没有任何反应。我最初只使用输入项

上的以下代码开始

<input type="checkbox" ng-checked="{{employee.inOffice}}" />

但是当点击div

时，这不会更新复选框

Answer 1

编辑此

  $.toggleCheckbox = function($event) {
    $event.stopPropagation();
}

到

 $scope.toggleCheckbox = function($event) {
  var checkbox = $event.target;
  if(checkbox.checked)
    //
  else
     //

    $event.stopPropagation();
}

Angular设置ng-click on row但复选框不能按预期工作

1 个答案: