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="https://www.itread01.com/ionic/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="https://www.itread01.com/ionic/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 = https://www.itread01.com/ionic/{ clientSide:'ng' }; $scope.serverSideChange = function(item) { console.log("Selected Serverside, text:", item.text, "value:", item.value); }; });
css 程式碼:
body { cursor: url('http://www.itread01.com/try/demo_source/finger.png'), auto; }
效果如下所示: