ionic

ionic 安装 ionic 创建 APP ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic toggle ionic checkbox ionic 单选框 ionic range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic 上拉菜单 ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模型 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作

ionic 单选框操作

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

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://jiaocheng.bubufx.com/try/demo_source/finger.png‘), auto;
}