Ionic - Moduli Javascript
In questo capitolo, capiremo cosa sono i moduli JavaScript e impareremo cosa sono una casella di controllo JavaScript, pulsanti di opzione e interruttore.
Utilizzando ion-checkbox
Vediamo come utilizzare la casella di controllo JavaScript Ionic. Innanzitutto, dobbiamo creare un fileion-checkboxelemento nel file HTML. All'interno di questo, assegneremo un fileng-model attributo che sarà connesso all'angolare $scope. Noterai che stiamo usando un filedotquando si definisce il valore di un modello anche se funzionerebbe senza di esso. Questo ci consentirà di mantenere il collegamento tra gli ambiti figlio e genitore in ogni momento.
Questo è molto importante in quanto aiuta a evitare alcuni problemi che potrebbero verificarsi in futuro. Dopo aver creato l'elemento, legheremo il suo valore usando espressioni angolari.
<ion-checkbox ng-model = "checkboxModel.value1">Checkbox 1</ion-checkbox>
<ion-checkbox ng-model = "checkboxModel.value2">Checkbox 2</ion-checkbox>
<p>Checkbox 1 value is: <b>{{checkboxModel.value1}}</b></p>
<p>Checkbox 2 value is: <b>{{checkboxModel.value2}}</b></p>
Successivamente, dobbiamo assegnare valori al nostro modello all'interno del controller. I valori che useremo sonofalse, poiché vogliamo iniziare con caselle di controllo non selezionate.
$scope.checkboxModel = {
value1 : false,
value2 : false
};
Il codice precedente produrrà la seguente schermata:
Ora, quando tocchiamo gli elementi della casella di controllo, cambierà automaticamente il loro valore di modello in “true” come mostrato nello screenshot seguente.
Utilizzando la radio ionica
Per cominciare, dovremmo crearne tre ion-radio elementi nel nostro HTML e assegnare il file ng-model e il ng-valuead esso. Dopodiché, visualizzeremo il valore scelto con l'espressione angolare. Inizieremo deselezionando tutti e tre gli elementi radio, quindi il valore non verrà assegnato al nostro schermo.
<ion-radio ng-model = "radioModel.value" ng-value = "1">Radio 1</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "2">Radio 2</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "3">Radio 3</ion-radio>
<p>Radio value is: <b>{{radioModel.value}}</b></p>
Il codice precedente produrrà la seguente schermata:
Quando tocchiamo il secondo elemento della casella di controllo, il valore cambierà di conseguenza.
Utilizzando ion-toggle
Noterai che l'interruttore è simile alla casella di controllo. Seguiremo gli stessi passaggi che abbiamo fatto con la nostra casella di controllo. Nel file HTML, prima creeremoion-toggle elementi, quindi assegna il file ng-model value e quindi associare i valori dell'espressione alla nostra vista.
<ion-toggle ng-model = "toggleModel.value1">Toggle 1</ion-toggle>
<ion-toggle ng-model = "toggleModel.value2">Toggle 2</ion-toggle>
<ion-toggle ng-model = "toggleModel.value3">Toggle 3</ion-toggle>
<p>Toggle value 1 is: <b>{{toggleModel.value1}}</b></p>
<p>Toggle value 2 is: <b>{{toggleModel.value2}}</b></p>
<p>Toggle value 3 is: <b>{{toggleModel.value3}}</b></p>
Successivamente, assegneremo valori a $scope.toggleModelnel nostro controller. Poiché, toggle utilizza valori booleani, assegneremotrue al primo elemento e false agli altri due.
$scope.toggleModel = {
value1 : true,
value2 : false,
value3 : false
};
Il codice precedente produrrà la seguente schermata:
Ora toccheremo il secondo e il terzo interruttore per mostrarti come i valori cambiano da falso a vero.