转载

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

效果如下所示：

正文到此结束

所属分类： ionic 教程

本文标签： CSS client IDE list ip value java 实例 Select JavaScript HTML python App http 代码 src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二