源代码:
下载代码
AI 编程工具
点击运行
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>菜鸟教程(runoob.com)</title> <link href="https://cdn.staticfile.net/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.staticfile.net/ionic/1.3.2/js/ionic.bundle.min.js"></script> <script type="text/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); }; }); </script> <style type="text/css"> body { cursor: url('https://www.248k.com/try/demo_source/finger.png'), auto; } </style> </head> <body ng-controller="MainCtrl"> <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> </body> </html>
运行结果: