当前位置:K88软件开发文章中心编程语言APP编程ionic01 → 文章内容

ionic 单选框操作

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-12 6:35:08

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="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('http://www.k88.net/try/demo_source/finger.png'), auto;}尝试一下 ?效果如下所示:

ionic 单选框操作