How to use Toggles like Radio-Buttons?

ionic-v1
1

Hey there,

im pretty new to Ionic and I’m playing a little bit around.
I’ve got pretty simple question.

How can I make a list of toggles which work like the Radio buttons?

I’m trying to make a Language selection with Toggles so if you select one Language (toggle = true)
all other toggles should set to false.

<ion-list>
  <ion-toggle  ng-model="langToggle.DE">
   <div class="flag"><img ng-src="img/de.png" alt="DE"></div> Deutsch
 </ion-toggle>
 <ion-toggle  ng-model="langToggle.EN">
   <div class="flag"><img ng-src="img/en.png" alt="EN"></div> English
 </ion-toggle>
 <ion-toggle  ng-model="langToggle.FR" >
   <div class="flag"><img ng-src="img/fr.png" alt="FR"></div> Francis
 </ion-toggle>
 <ion-toggle  ng-model="langToggle.IT">
   <div class="flag"><img ng-src="img/it.png" alt="IT"></div> Italiano
 </ion-toggle>
</ion-list>

.controller('SettingsCtrl', function($scope) {
  $scope.langToggle = {
    DE: true,
    EN: false,
    FR: false,
    IT: false,
   }
});

image

2

did you try to use only one ng-model for all toggles with ng-value?

3

could you provide me an example please?

If I set for all the same ng-model with just diffrent ng-values all toggles are setting true/false at the same time.
Or am I missing something?

4

I’m still trying to make this work, any help on this?

I’ve changed to code a little bit, still I don’t know how I can change the checked statement to “false”.

<ion-list>
		<ion-toggle ng-repeat="item in sprachListe" ng-model="item.checked" ng-checked="item.checked">
			<div class="flag"><img ng-src="{{item.bildflag}}" alt="{{item.sprachcode}}"></div>
			{{ item.sprache }}
			<br>
			<pre>{{item.checked|json}}</pre>
		</ion-toggle>

</ion-list>

.controller('SettingsCtrl', function($scope) {
$scope.sprachListe = [
  { 	sprache: "Deutsch",
  	sprachcode: "DE",
  	bildflag: "img/de.png",
  	checked: true
  },
  { 	sprache: "Englisch",
  	sprachcode: "EN",
  	bildflag: "img/en.png",
  	checked: false
  },
  { 	sprache: "Francis",
  	sprachcode: "FR",
  	bildflag: "img/fr.png",
  	checked: false
  },
  { 	sprache: "Italiano",
  	sprachcode: "IT",
  	bildflag: "img/it.png",
  	checked: false
  },
];
});
5

Okay I did it like this and it works… is there a better way? ( keep in mind I want to use this with angluar-translater later on)

.controller('SettingsCtrl', function($scope) {
 $scope.langToggle = {
 DE: true,
 EN: false,
 FR: false,
 IT: false,
 }
});

<ion-list>
		<ion-toggle ng-model="langToggle.DE" ng-click="langToggle.DE = !false; langToggle.EN = false; langToggle.FR = false; langToggle.IT = false">
			<div class="flag"><img ng-src="img/de.png" alt="DE"></div> Deutsch
		</ion-toggle>
		<ion-toggle  ng-model="langToggle.EN" ng-click="langToggle.EN = !false; langToggle.DE = false; langToggle.FR = false; langToggle.IT = false">
			<div class="flag"><img ng-src="img/en.png" alt="EN"></div> English
		</ion-toggle>
		<ion-toggle  ng-model="langToggle.FR" ng-click="langToggle.FR= !false; langToggle.DE = false; langToggle.EN = false; langToggle.IT = false">
			<div class="flag"><img ng-src="img/fr.png" alt="FR"></div> Francis
		</ion-toggle>
		<ion-toggle  ng-model="langToggle.IT" ng-click="langToggle.IT = !false; langToggle.DE = false; langToggle.FR = false; langToggle.EN = false">
			<div class="flag"><img ng-src="img/it.png" alt="IT"></div> Italiano
		</ion-toggle>
		<br>
		<pre>{{langToggle|json}}</pre>
	</ion-list>
6

I need to do same with best practice !!!