ionic 單選框操作
實例中,根據(jù)選中的不同選項,顯示不同的值。
HTML 代碼
<ion-header-bar class="bar-positive"> <h1 class="title">當(dāng)選按鈕</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('//m.hgci.cn/try/demo_source/finger.png'), auto; }
效果如下所示:
更多建議: