Angularjs checkbox checked onload but gives undefined when unchecked first time inside nested ng-repeat

Question

I am using AngularJS, Ionic (v 1) frameworks. On load of the mobile app screen, the checkboxes are to displayed as checked & then user may check or uncheck the checkboxes. The checkboxes are checked on load fine, however, when first time user unchecks a checkbox then the checkbox status value is undefined even though the checkbox is seen to be unchecked. After this when it is checked then it works fine whereby either the checkbox value is true or false depending upon if user checked it or unchecked it. Below if the html section of the code that is displaying the nested ng-repeat and checkboxes displayed. Also, there are multiple checkboxes that can be displayed and that is why second ng-repeat is used to load all the values for the checkboxes. Below the HTML code is the Javascript functions in controllers.

The togglegroup & isgroupshown functions are used to show or hide the checkboxes when the user clicks on the icon next to Extras.

HTML

<form name="list" class="list">
<div ng-repeat="(i, item) in menu_items track by $index">
<div class="item item-divider">
{{item.p_name}}
</div>
<select ng-show="item.Customizable == 1" ng-model="data.cmbIngredient[i]">
<option selected="selected" value="">Select the size</option>
<option ng-repeat="x in item.ProductSizes" value="{{x}}">
{{x.ProductName}}: €{{x.ProductPrice | number:2}}
</option>
</select>
<div>
{{item.p_description}}
</div>
<!-- if the Extras value equates to 1 then the checkbox is displayed-->
<div ng-show="item.Extras == 1">
<i ng-click="toggleGroup(item)" class="icon balanced icon" ng-class="isGroupShown(item) ? 'ion-minus' : 'ion-plus-round'"></i> Extras
<label ng-repeat="(j, ext) in item.ExtraDetails track by $index" class="checkbox" ng-show="isGroupShown(item)">

<input type="checkbox" ng-checked="1" ng-change="AddExtras(data.data[j].chkextras[i],item.p_id)" ng-model="data.data[j].chkextras[i]"> {{ext.CIngredientName}}

</label>
</div>
</div>
</form>

Controller functions

$scope.AddExtras=function(extraStatus,pid){
if(extraStatus == true){
    //pass it to service
}
else if (extraStatus == false){
    //pass it to a service
}
};
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};

Wilt · Accepted Answer · 2017-07-05 15:31:06Z

1

If you read the docs for ng-checked you can clearly read what causes the issue:

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

Conclusion: you should either use ng-checked or ng-model and not mix both.

answered Jul 5, 2017 at 15:31

Wilt

44.9k15 gold badges163 silver badges215 bronze badges

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

4 Comments

Ritz Over a year ago

Ya Thanks!. However, if I don't use ng-checked then the onload checked status of checkboxes doesn't work. Tried the traditional html ways of using checked. Any thoughts on that please? Thanks again!

Wilt Over a year ago

If you want the initial state to be checked you need to make sure that your ng-model evaluates to true. In other words you should make sure that this variable data.data[j].chkextras[i] is true. Maybe you can set data.data[j].chkextras[i] to true in your controller?

Ritz Over a year ago

Your suggested direction for solution was helpful. I was able to improvise and achieve the desired result. Will up vote your response. For someone visiting here: As Wilt pointed out - i used a scope variable in ng-model and in controller set it to true or false according to the logic. Please also note that you can't possibly call a function in ng-model rather use a scope variable.

Wilt Over a year ago

@Ritz If this answers your question you should consider accepting the answer so others see that your issue is resolved.

ASLAM TP · Accepted Answer · 2017-07-05 17:31:11Z

0

You should be looking for something like this. ng-true/false-value

answered Jul 5, 2017 at 17:31

ASLAM TP

17011 bronze badges

1 Comment

Ritz Over a year ago

My understanding is that ng-true/false-value sets those values for the checkbox that can be fetched when check is checked/unchecked. So one can set 1/0 etc. Didn't understand how does it address the problem? Please Thanks!

Collectives™ on Stack Overflow

Angularjs checkbox checked onload but gives undefined when unchecked first time inside nested ng-repeat

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related