CODEWITHSUNDEEP
javascriptbuttonionic-frameworkscope
Benpeterscode
Benpeterscode

Reputation: 93

How to use Ionic Button to submit change in Checkbox value

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.

Upvotes: 0

Views: 65

Answers (1)

Sathyajith
Sathyajith

Reputation: 4024

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

Upvotes: 1

Related Questions