How to use Ionic Button to submit change in Checkbox value

Question

So I have this to display a list of to-do items:

 <ion-item class="item-divider">To Do</ion-item>
 <ion-checkbox  ng-repeat="todo in todos" ng-if="!todo.completed" 
 [(ngModel)]="todo.completed">
 <ion-label>{{todo.name}}</ion-label>
 </ion-checkbox>

From here:

function ($scope, $stateParams) {

$scope.todos = [
            {name:"Clean out fridge" , completed:false},
            {name:"Change sheets on all the beds" , completed:false},
            {name:"Mop Floors" , completed:false}
           ];


      }

and then when the to-do its is marked as "completed:true" it goes to this list:

<ion-item class="item-divider"> Completed</ion-item>
<ion-item class="item-icon-left balanced" ng-repeat="todo in todos" ng-
if="todo.completed" [(ngModel)]="todo.completed">
<i class="icon ion-checkmark-circled"></i><ion-label>{{todo.name}}
</ion-label></ion-item>

however at this point it only works by me going into the $scope.todos and changing the completed state from false to true. What i'm trying to figure out how to use an ionic button to check if the checkbox is checked, and therefore is true, and submit that change to the $scope.todo when the button it is clicked on.

Sathyajith · Accepted Answer · 2017-08-30 17:39:01Z

1

You can try with ng-model-options, for that you need to add you controls inside a form and use submit type button. In the form use ng-model-options to update model on submit by adding the below attribute

ng-model-options="{ updateOn: 'submit' }"

Refer the below link

https://codepen.io/scottmetoyer/pen/JozErN

answered Aug 30, 2017 at 17:39

Sathyajith

4,0743 gold badges18 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

How to use Ionic Button to submit change in Checkbox value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related