AngularJS Checkbox not working

Question

I have a class called Case that contains a list of executionSteps. Each executionStep has a boolean property called enabled. I am trying to set in on the HTML side but it never gets updated 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 the function updateCaseExecutionStep defined as shown below

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

Problem is when I update my checkbox or even manually update the enabled property of the executionStep

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

I don't see any change. The enabled property of executionStep passed in the JS does not change. Please help.

Do I have to modify somehow on the The HTML side ?

I don't think you need all those double brackets, this would work fine: ng-change="updateCaseExecutionStep(study.id,acase.id,acase.executionSteps[0].id,acase.executionSteps[0])" — Mihaly KR
– Mihaly KR, Commented Jul 28, 2014 at 17:39
That seems to work, how do you pass in the true/false value from the HTML to the JS. Is there a way to pass in the true/value in the function call. For instance in my updateCaseExecutionStep(), how do I pass the state of if it has been clicked(true) or not(false) — user3799365
– user3799365, Commented Jul 28, 2014 at 19:21

Nimish · Accepted Answer · 2020-04-28 09:20:06Z

15

You are trying to force too complex solution. To start with, you do not need ng-checked nor ng-change when you are using ng-model.

Let's 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 }}
</div>

That's all it takes!

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

Edit:

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

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

And in controller

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

edited Apr 28, 2020 at 9:20

Nimish

1,06613 silver badges30 bronze badges

answered Jul 28, 2014 at 19:25

Mikko Viitala

8,4044 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3799365 Over a year ago

How would I know which Checkbox has been clicked on the JS side

Mikko Viitala Over a year ago

Edited the answer and plunker.

user3799365 Over a year ago

Thanks Mikko, the first answer itself worked. I appreciate your help. Its very kind of you.

Russ Jackson · Accepted Answer · 2015-12-29 18:12:07Z

4

I had to abandon ng-model for my checkbox as it was not picking up the initial value that was set in the model (in response to a service call). All of the other input controls were responding correctly to the model (and, interestingly, were correctly enabled/disabled based on the value backing the checkbox).

Instead, I used the 'checked' attibute and ng-click, as 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);
};

edited Dec 29, 2015 at 18:12

answered Dec 29, 2015 at 18:05

Russ Jackson

2,1321 gold badge21 silver badges15 bronze badges

1 Comment

vascowhite Over a year ago

I wish I'd read this two days ago! I'm doing the same as you.

Collectives™ on Stack Overflow

AngularJS Checkbox not working

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related