1. Home
  2. ionic radio button operation

The best ionic radio button operation Tutorial In 2024, In this tutorial you can learn ionic radio button operation

ionic radio button operation

Example, according to the different options selected, displays different values.

HTML code 

<ion-header-bar class="bar-positive">
  <h1 class="title">当选按钮</h1>
</ion-header-bar>
         
<ion-content>
  
  <div class="list">
    
    <div class="item item-divider"> 
      选取的值为: {{ data.clientSide }}
    </div>
    
    <ion-radio ng-repeat="item in clientSideList"
               ng-value="item.value"
               ng-model="data.clientSide">
      {{ item.text }}
    </ion-radio>
    
    <div class="item item-divider">
      Serverside, Selected Value: {{ data.serverSide }}
    </div>
    
    <ion-radio ng-repeat="item in serverSideList"
               ng-value="item.value"
               ng-model="data.serverSide"
               ng-change="serverSideChange(item)"
               name="server-side">
      {{ item.text }}
    </ion-radio>
    
  </div>
  
</ion-content>

JavaScript code 

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {

  $scope.clientSideList = [
    { text: "Backbone", value: "bb" },
    { text: "Angular", value: "ng" },
    { text: "Ember", value: "em" },
    { text: "Knockout", value: "ko" }
  ];

  $scope.serverSideList = [
    { text: "Go", value: "go" },
    { text: "Python", value: "py" },
    { text: "Ruby", value: "rb" },
    { text: "Java", value: "jv" }
  ];
  
  $scope.data = {
    clientSide: 'ng'
  };
  
  $scope.serverSideChange = function(item) {
    console.log("Selected Serverside, text:", item.text, "value:", item.value);
  };
  
});

css code: 

body {
  cursor: url('/en/try/demo_source/finger.png'), auto;
}

The effect is as follows:

Hot Tools

Other Tools

Online Tutorial

Website Navigation

ionic radio button operation
10/30