实例中，根据选中的不同选项，显示不同的值。
| <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); |
| }; |
| }); |
| body { |
| cursor: url('http://www.web3.xin/try/demo_source/finger.png'), auto; |
| } |
