O melhor tutorial operação de botão de rádio iônica em 2024. Neste tutorial você pode aprender operação de botão de rádio iônica
Exemplo, de acordo com as diferentes opções selecionadas, exibe valores diferentes.
<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>
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 código:
body {
cursor: url('pt/try/demo_source/finger.png'), auto;
}
O efeito é o seguinte: