Question

所以我遇到了一个问题，我花了一些时间研究并且无济于事，没有找到可行的解决方案。

我的情况：

我有一系列复选框，可以通过ng-change激活一个函数（用户点击复选框）。
如果选中此复选框，则每个复选框都绑定到ng-model布尔值。
对于每一行，我都选择了所有＆＃39;复选框，它触发一个循环遍历该行中复选框的函数，并根据select all值将其ng-model的bool更新为true或false。
在DOM上，select all工作正常，每个复选框bool值都会更改，从而导致选中或取消选中复选框。
即使ng-model bool在复选框上从true更改为false，也不会触发ng-change功能。

我已经尝试在ng-models上实现观察者试图触发每个ng-change但它不起作用。

我尝试将ng-change更改为ng-click并强制选择所有功能到.trigger（＆＃39;点击＆＃39;），哪种有效，但既有hacky又无法正常工作如果已经单击其中一个复选框，则正确。如果真实价值，这会导致它相反。

如果用户没有直接点击复选框，是否可以通过控制器触发复选框上的ng-change功能？我通过函数传递参数，因此必须从ng-change中触发，而不仅仅是在控制器中。

Here是我想要完成的JS Bin的链接。

如果单击顶部框（全选），则所有下方框都会填写。如果单击其中一个下方框，则会触发ng-change功能，该功能会在已触发的DOM上显示一些文本。如果单击全选按钮，它不会显示文本（不触发ng-change）。

Answer 1

据我所知，当你点击“全选”复选框时，你会想要解雇每个孩子的复选框。

我认为你可以简单地尝试在$ scope.selectAll函数中调用$ scope.checked，如下所示：

function MyCtrl($scope) {
$scope.tableRows = [{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0}];
$scope.prices = {oral: 100, cleaning: 50, filling: 75, xray: 200, crown: 125, canal: 100, dentures: 60, braces: 130}
$scope.selectAll = function(procedure, checked) {
    angular.forEach($scope.tableRows, function(person, index) {
      $scope.checked($scope.prices[procedure], index, checked, procedure);          
    });
};
$scope.checked = function(amount, position, checked, procedure) {
   $scope.tableRows[position][procedure] = checked;
   if (checked) {
      $scope.fired = 'FIRED!';
      $scope.dollarAmmount = $scope.dollarAmmount + amount;
      $scope.tableRows[position].subtotal += amount;
   } else if (!checked) {
      $scope.fired = '';
      $scope.dollarAmmount = $scope.dollarAmmount - amount;
      $scope.tableRows[position].subtotal -= amount;
   }
 }
}

在JS Bin

上运行

我还优化了一些代码行。希望它能解决你的问题。

干杯！

Answer 2

尝试更改selectall方法，希望它能为您提供帮助。

$scope.selectAll = function(procedure, checked) {

  if (checked) {
  angular.forEach($scope.tableRows, function (person) {

    person[procedure] = true;
  })
} else if (!checked) {
  angular.forEach($scope.tableRows, function (person) {
    person[procedure] = false;
  })
}
};

在这里找工作JS BIN

AngularJS - 基于ng-model值

2 个答案: