Ionic Js五：单选框操作-优快云博客

本文介绍如何在Ionic框架中使用单选按钮实现不同选项的选择，并展示如何根据选择显示相应的值。通过AngularJS控制器设置客户端和服务器端的选项列表，当选项改变时触发特定函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例中，根据选中的不同选项，显示不同的值。
HTML 代码

<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 代码

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 代码

body {
  cursor: url('http://www.quickcodes.net/try/demo_source/finger.png'), auto;
}

转载于:https://www.cnblogs.com/quickcodes/p/Ionic-Js-wu-dan-xuan-kuang-cao-zuo.html