Binding dynamic checkbox in angular.js

Question

I have a list of options pulled from the database via json based on product selection in angular.js

Here's a sample code:

<ion-checkbox ng-repeat="extra in extras" ng-model="order.extras" checklist-value="{{ extra.id }}"><strong>{{ extra.name }}</strong></ion-checkbox>

I want a user to be able to select multiple extras but can't seem to be able to bind these selections.

that worked thanks even though I wanted all form field assigned to the order variable — Masinde Muliro
– Masinde Muliro, Commented Apr 19, 2016 at 20:24

AWolf · Accepted Answer · 2016-04-19 20:54:27Z

1

I think it could work with ng-model="order.extras[extra.id]" then you can track the checked extras in order.extras.

Please have a look at the demo below or at this jsfiddle.

angular.module('demoApp', ['ionic'])
	.controller('mainController', mainController);
    
function mainController($scope) {
	$scope.order = {};
	$scope.extras = [
    	{
        id: 0,
        name: 'first'
        },
        {
        id: 1,
        name: 'second'
        },
        {
        id: 2,
        name: 'third'
        }
    ]
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic-angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<ion-content>
    <ion-checkbox ng-repeat="extra in extras" ng-model="order.extras[extra.id]" checklist-value="{{ extra.id }}"><strong>{{ extra.name }}</strong></ion-checkbox>
    
current order: {{order}}
    
</ion-content>
</div>

answered Apr 19, 2016 at 20:54

AWolf

9,0105 gold badges38 silver badges43 bronze badges

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

1 Comment

Masinde Muliro Over a year ago

You're a life saver!

Collectives™ on Stack Overflow

Binding dynamic checkbox in angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related