欢迎光临
梦想从学习开始!

ionic 单选框操作 | 小熊教程

ionic 单选框操作

Tips:您正在学习的是ionic 单选框操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8716 ,您可通过标签查询系列课程。祝您学习愉快!

实例中,根据选中的不同选项,显示不同的值。

HTML 代码

Tips:您正在学习的是ionic 单选框操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8716 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <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 代码

Tips:您正在学习的是ionic 单选框操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8716 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 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.runoob.com/try/demo_source/finger.png'), auto; } 

效果如下所示:

赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 单选框操作 | 小熊教程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏