AngularJS checkbox not working

Question

I have a class called "Case" that contains a list of executable steps. Each executeStep has a boolean property called enabled. I am trying to install on the HTML side, but it never updates on the JS side. HTML side

<td> <input type="checkbox" ng-checked="acase.executionSteps[0].enabled" ng-model="aa" ng-change="updateCaseExecutionStep('{{study.id}}','{{acase.id}}','{{acase.executionSteps[0].id}}','{{acase.executionSteps[0]}}')"/> </td>` 

On the controller side, I have an updateCaseExecutionStep function as shown below

 $scope.updateCaseExecutionStep = function(studyId,caseId,executionStepId,executionStep){ ... ... } 

The problem is that I am updating my checkbox or even manually updating the enable executeStep property

 $scope.updateCaseExecutionStep = function(studyId,caseId,executionStepId,executionStep){ executionStep.enabled = true; ... } 

I do not see any changes. The included executeStep property passed to JS does not change. Please, help.

Do I need to somehow change the HTML side?

Answer 1

You are trying to make an overly complicated decision. For starters, you don't need ng-checked and ng-change when you use ng-model .

Say you have the following controller

 app.controller('MainCtrl', function($scope) { $scope.case = { caseId: 0, steps: [ { id: 1, name: 'First step', enabled: true }, { id: 2, name: 'Second step', enabled: false }, { id: 2, name: 'Third step', enabled: false }] }; }); 

And related HTML

 <div ng-repeat="step in case.steps"> <input type="checkbox" ng-model="step.enabled">&nbsp;{{ step.name }}</input> </div> 

That’s all you need!

Plunk example here http://plnkr.co/edit/QjD91l

Edit:

If you need to do some selection-based processing, then yes, you can add the ng-change control to input . Then the HTML becomes

 <input type="checkbox" ng-model="step.enabled" ng-change="stateChanged(step)">&nbsp;{{ step.name }}</input> 

And in the controller

 $scope.stateChanged = function(step){ console.log('Changed step id:' + step.id + ' enabled state to ' + step.enabled; }; 

Answer 2

I had to abandon ng-model for my checkbox because it did not collect the initial value set in the model (in response to a service call). All other input controls reacted correctly to the model (and, interestingly, were correctly enabled / disabled based on the value that supports this flag).

Instead, I used the "checked" attitute and ng-click, like so:

 <input type="text" ng-disabled="!myModel.isFruit" ng-model="myModel.seedCount"> <input type="checkbox" checked="{{myModel.isFruit}}" ng-click="onFruitClicked()"> Is Fruit 

In my controller:

 $scope.myModel = { isFruit : myServices.getIsFruit(), seedCount : myServices.getSeedCount() }; $scope.onFruitClicked = function() { // toggle the value $scope.myModel.isFruit = !$scope.myModel.isFruit; // save the new value myServices.setIsFruit($scope.myModel.isFruit); };