AngularJS

Question

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

我的情况：

我有一排复选框，它们通过 ng-change 触发一个函数（用户点击复选框）。
无论复选框是否被选中，每个复选框都绑定到一个 ng-model 布尔值。
对于每一行，我都有一个 'select all' 复选框，它会触发一个函数，循环遍历该行中的复选框，并根据 select 将其 ng-model 的 bool 更新为 true 或 false所有价值。
在 DOM 上，select 一切正常，每个复选框的 bool 值都已更改，导致复选框被选中或取消选中。
即使复选框上的 ng-model bool 从 true 更改为 false，也不会触发 ng-change 函数。

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

我已经尝试将 ng-change 更改为 ng-click 并将 select 中的所有函数强制转换为 .trigger('click')，这种方法可行，但既不可靠又不可行如果已单击其中一个复选框，则可以正常工作。这导致它与真值相反。

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

Here 是我要完成的 JS Bin 的 link。

如果单击顶部框（select 全部），则填充所有底部框。如果单击底部框之一，它会触发 ng-change 功能，该功能会在 DOM 被解雇。如果单击 select 全部按钮，它不会显示文本（不会触发 ng-change）。

Answer 1

据我了解，您想要的是在单击 "select all" 复选框时触发每个子复选框。

我认为您可以尝试在 $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 值触发 ng-change

AngularJS - Trigger ng-change based on ng-model value

javascript

checkbox

angularjs-ng-change