所以我遇到了一个问题,我花了一些时间研究但无济于事,还没有找到可行的解决方案。
我的情况:
- 我有几行复选框,可以通过 ng-change 触发函数(用户单击复选框)。
- 如果选中或未选中该复选框,每个复选框都会绑定(bind)到一个 ng-model bool 值。
- 对于每一行,我都有一个“全选”复选框,该复选框会触发一个循环遍历该行中的复选框的函数,并根据全选值将其 ng-model 的 bool 值更新为 true 或 false。
- 在 DOM 上,全选工作正常,并且每个复选框 bool 值都会更改,导致复选框被选中或取消选中。
- 即使复选框上的 ng-model bool 值从 true 更改为 false,也不会触发 ng-change 函数。
我尝试在 ng-models 上实现观察者来尝试触发每个 ng-change,但它不起作用。
我尝试将 ng-change 更改为 ng-click 并强制将全选功能更改为 .trigger('click'),这种方法可以工作,但既很hacky,而且如果其中一个复选框被选中,则无法正常工作已经点击了。这会导致它与真值相反。
如果用户不直接单击复选框,是否有办法从 Controller 触发复选框上的 ng-change 函数?我通过函数传递参数,因此必须从 ng-change 触发它,而不仅仅是在 Controller 中。
Here是我想要完成的 JS Bin 的链接。
如果您单击顶部框(全选),则所有下部框都会填充。如果您单击下部框之一,它会触发 ng-change 函数,该函数会在触发的 DOM 上显示一些文本。如果单击全选按钮,它不会显示文本(不触发 ng-change)。
最佳答案
据我了解,您想要的是在单击“全选”复选框时触发每个子复选框。
我认为你可以简单地尝试在 $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
我还优化了一些代码行。希望它能解决您的问题。
干杯!
关于javascript - AngularJS - 根据 ng-model 值触发 ng-change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38757127/