Ionic encapsulates a set of instructions for form input, including ion-checkbox (check box), Ion-radio (Radio box), ion-toggle (switch). 2. Ion-checkbox
Ionic's Check button and the HTML check button is not much different, in addition to the beautiful style, its advantages are mainly in the ability to bind with Ng-model, you can use ng-checked to conveniently control whether it is selected, you can use Ng-change to listen to its selected state to perform the corresponding operation. The following are one of the most basic examples and a more complex example.
<body ng-app= "myApp" ng-controller= "Mycontroller" >
<ion-checkbox ng-repeat= "fruit in fruits" >
{ {Fruit}}
</ion-checkbox>
<script>
var app = Angular.module ("myApp", [' Ionic ']);
App.controller ("Mycontroller", function ($scope) {
$scope. Fruits = ["apple", "lychee", "Sydney", "watermelon"];
});
</script><body ng-app= "myApp" ng-controller= "Mycontroller" > <ion-header-bar class= "Bar bar-positive" >
3. Ion-radio
Ionic's radio box also differs greatly from the HTML radio box, which is mainly the ability to use Ng-model to implement data binding to scoped variables, using Ng-value to set corresponding values for individual radio buttons. The connection between Ng-model and Ng-value is that Ng-value sets the logical value for the radio button when it is selected, and Ng-model is to bind the variable to the logical value in both directions.
<ion-content class= "Scroll-content has-header" > <ion-list> <div class= "Item Item-divider" >{{Choice}}</div> <ion-radio ng-model= "Choice" ng-value= "Value[0" "> Apple </ion-radio> <ion-radio ng-model= "Choice" ng-value= "Value[1" "> Lychee </ion-radio> <ion-radio ng-model=" Choice " Ng-value= "value[2" > Sydney </ion-radio> <ion-radio ng-model= "Choice" ng-value= "value[3]" > Watermelon </ ion-radio> </ion-list> </ion-content> <script> var app = Angular.module (" MyApp ", [' Ionic ']); App.controller ("Mycontroller", function ($scope) { $scope. Value = ["First", "second", "third", "fourth"]; $scope. choice= "Second"; }); </script>
The following is a simple example of a radio button, note that unlike the previous example, because Ng-repeat creates a new scope (how many scopes are created repeat how many times, they "replicate" the parent scope, but not the same scope), In this example, the choice must be written in an array or an object, because only a reference copy is made, and the child scope can successfully update the values within the object or array in the outer scope.<body ng-app= "myApp" ng-controller= "Mycontroller" > <ion-header-bar class= "Bar bar-positive" >4.ion-toggle
In ionic, the switch element is declared with the Ion-toggle, the switch action is consistent with the check box, and the use method is basically the same, the following is a simple example.
<div ng-controller= "Mycontroller" > <ion-list> <ion-toggle toggle-class= "Toggle-calm" Ng-repeat= "Item in Items" ng-model= "Item.select" > </ion-toggle> </ion-list> </div > <script> var app = Angular.module ("myApp", [' Ionic ']); App.controller (' Mycontroller ', function ($scope) { $scope. Items = [ {name: "Ringtone", select:true}, {name: " Data traffic ", select:true}, {name:" Bluetooth ", select:false} ]; }); </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
