javascript - AngularJS - ng-checked isn't triggering ng-change - Stack Overflow

Basically I have a table and each row have a text input and a checkbox, the checkbox assign a default value to the input. The problem I'm having is that I want to have a checkbox to check all checkboxes, and I've done it, but it's not evaluating the expression in ngChange.

This is what I have:

1) Controller.js:

$scope.formData = {};
$scope.def_ine = [];
$scope.master = false;
$scope.formData.ine = [{ from:"", to:"", ine:"" }]
$scope.addSal = function () {
    this.formData.ine.push({from:'',to:'',ine:''});
};
$scope.delSal = function (index) {
    if (index != 0) this.formData.ine.splice(index,1);
}
$scope.masterToggle = function () {
    this.master = this.master ? false : true;
}
$scope.defIne = function (index) {
    if (this.def_ine[index]) this.formData.ine[index].ine="Default";
    else this.formData.ine[index].ine = "";
}

2) index.html:

<a href="" ng-click="addSal()">Add</a>
<a href="" ng-model="master" ng-click="masterToggle()">Check all</a>
<table>
    <thead>
        <th>From</th>
        <th>To</th>
        <th>Ine</th>
    </thead>
    <tbody>
        <tr ng-repeat="ine in formData.ine">
            <td><input kendo-date-picker class="form-control" ng-model="ine.from" placeholder="From" /></td>
            <td><input kendo-date-picker class="form-control" ng-model="ine.to" /></td>
            <td><input class="form-control" ng-model="ine.ine" /></td>
            <td>Default ine <input type="checkbox" ng-model="def_ine[$index]" ng-checked="master" ng-change="defIne($index)" /></td>
            <td><a href="" ng-show="$index != 0" ng-click="delSal($index)">Delete</a></td>
        </tr>
    </tbody>
</table>

The problem is that when masterToggle function is executed, it effectively toggle the $scope.master value, and it's evaluated in ng-checked, the checkboxes are checked, but the defIne function that should be evaluated when the checkbox value changes isn't.

Im really new to AngularJS (less than a week) so if I'm applying some bad practices please feel free to point them out :)

UPDATE 1:

So I followed embee's suggestion and it worked, I wonder if there's a better way, anyways, this is what I did:

$scope.masterToggle = function () {
    this.master = this.master ? false : true;
    for (var j = 0; j <= this.formData.salarios.length-1; j++) {
        this.formData.salarios[j].salario = $scope.master ? "Salario mínimo" : "";
    }
}

Basically I have a table and each row have a text input and a checkbox, the checkbox assign a default value to the input. The problem I'm having is that I want to have a checkbox to check all checkboxes, and I've done it, but it's not evaluating the expression in ngChange.

This is what I have:

1) Controller.js:

$scope.formData = {};
$scope.def_ine = [];
$scope.master = false;
$scope.formData.ine = [{ from:"", to:"", ine:"" }]
$scope.addSal = function () {
    this.formData.ine.push({from:'',to:'',ine:''});
};
$scope.delSal = function (index) {
    if (index != 0) this.formData.ine.splice(index,1);
}
$scope.masterToggle = function () {
    this.master = this.master ? false : true;
}
$scope.defIne = function (index) {
    if (this.def_ine[index]) this.formData.ine[index].ine="Default";
    else this.formData.ine[index].ine = "";
}

2) index.html:

<a href="" ng-click="addSal()">Add</a>
<a href="" ng-model="master" ng-click="masterToggle()">Check all</a>
<table>
    <thead>
        <th>From</th>
        <th>To</th>
        <th>Ine</th>
    </thead>
    <tbody>
        <tr ng-repeat="ine in formData.ine">
            <td><input kendo-date-picker class="form-control" ng-model="ine.from" placeholder="From" /></td>
            <td><input kendo-date-picker class="form-control" ng-model="ine.to" /></td>
            <td><input class="form-control" ng-model="ine.ine" /></td>
            <td>Default ine <input type="checkbox" ng-model="def_ine[$index]" ng-checked="master" ng-change="defIne($index)" /></td>
            <td><a href="" ng-show="$index != 0" ng-click="delSal($index)">Delete</a></td>
        </tr>
    </tbody>
</table>

The problem is that when masterToggle function is executed, it effectively toggle the $scope.master value, and it's evaluated in ng-checked, the checkboxes are checked, but the defIne function that should be evaluated when the checkbox value changes isn't.

Im really new to AngularJS (less than a week) so if I'm applying some bad practices please feel free to point them out :)

UPDATE 1:

So I followed embee's suggestion and it worked, I wonder if there's a better way, anyways, this is what I did:

$scope.masterToggle = function () {
    this.master = this.master ? false : true;
    for (var j = 0; j <= this.formData.salarios.length-1; j++) {
        this.formData.salarios[j].salario = $scope.master ? "Salario mínimo" : "";
    }
}

• javascript
• angularjs

Share Improve this question Follow edited Sep 1, 2013 at 1:08 davidaam asked Sep 1, 2013 at 0:06 davidaamdavidaam 44911 gold badge88 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

From the ngChange docs:

Evaluate given expression when user changes the input. The expression is not evaluated when the value change is ing from the model.

In your case the value change is ing from the model, not when the user changes the input of the "default ine" checkbox which you've put ng-change on, therefore the expression is not evaluated.