[英]AngularJS - Trigger ng-change based on ng-model value
所以我遇到了一个问题,我花了一些时间研究,但无济于事,没有找到一个有效的解决方案。
我的情况:
我尝试在ng-models上实现观察者试图触发每个ng-change但它不起作用。
我已经尝试将ng-change更改为ng-click并强制将select all函数强制为.trigger('click'),这种方式有效,但如果已经单击其中一个复选框,则它们都是hacky并且无法正常工作。 如果真实价值,这会导致它相反。
如果用户没有直接点击复选框,有没有办法从控制器上激活复选框上的ng-change功能? 我通过函数传递参数,因此必须从ng-change中触发,而不仅仅是在控制器中。
这是我想要完成的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上运行
我还优化了一些代码行。 希望它能解决你的问题。
干杯!
尝试改变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在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.