<!DOCTYPE html>
<html>
<head>
<link data-require="ionic@*" data-semver="1.0.0-beta6" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" />
<script data-require="ionic@*" data-semver="1.0.0-beta6" src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="RadioDemo">
<ion-nav-view></ion-nav-view>
</body>
</html>
angular.module("RadioDemo", ["ionic"])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('app', {
url: "/app",
templateUrl: "app.html",
controller: "MainCtrl"
});
$urlRouterProvider.otherwise("/app");
})
.controller("MainCtrl", function($scope) {
$scope.items = [
{ Id: 1, Name: "Test 1" },
{ Id: 2, Name: "Test 2" },
{ Id: 3, Name: "Test 3" }
];
$scope.item = 2;
});
/* Styles go here */
<ion-view view-title="Radio button demo">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Chosen option: {{item}}</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-model="item" ng-value="i.Id" ng-repeat="i in items">{{i.Name}}</ion-radio>
</ion-list>
</ion-content>
</ion-view>