Toggles / checkboxes help needed


#1

Hi again Guys,

I need some help here

To start with I have ingredients per item modeled individually per item where needed (ex below)

"1d4aa3b2-c059-4fa7-a751-9bca735e4ea1" : {
		"body" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae interdum ante. Quisque a augue elit. Sed id dolor id est scelerisque porttitor eget a ligula. Ut dapibus feugiat purus tempus maximus.",
		"category" : "cat-breakfast",
		"extraOptions" : [ {
			"name" : "Cucumber",
			"selected" : false,
			"value" : "1.20"
		} ],
		"isFeatured" : false,
		"pictures" : [ "https://skounis.s3.amazonaws.com/mobile-apps/restaurant-ionic/_release/assets/cat-placeholder.png" ],
		"price" : [ {
			"currency" : "LL",
			"name" : "Standard",
			"value" : "8"
		}, {
			"currency" : "LL",
			"name" : "Large",
			"value" : "12"
		} ],
		"standardOptions" : [ {
			"name" : "Tomatoes",
			"selected" : true
		}, {
			"name" : "Olives",
			"selected" : true
		}, {
			"name" : "Oregano",
			"selected" : true
		} ],
		"tags" : [ "amet", "adipiscing" ],
		"thumb" : "https://skounis.s3.amazonaws.com/mobile-apps/restaurant-ionic/_release/assets/cat-placeholder-thumb.png",
		"title" : "Cretan Ntakos"
	},

Now,
The user has a booking form to pick those options or extras as below


Changes Required




{{option.name}}: {{option.value | currency : (option.currency || 'LL ') : 0}}
					<label class="toggle">
						<input type="checkbox" ng-model="option.selected">
						<div class="track">
							<div class="handle"></div>
						</div>
					</label>


				</ion-item>
				</ion-list>
			</div>

My problem is that in some instances where a product has several ingredients or flavors per say i end up with a pretty long list.

Any idea how to group those flavors in order to get for instance

---------- Cheese -------------
O Less | O Regular | O More

here Regular is selected by default (class=“selected”)

currently i have 3 lines for cheese alone

Appreciate your input
Toki