Ionic Js五:单选框操作
2016-06-16 17:10
381 查看
实例中,根据选中的不同选项,显示不同的值。
HTML 代码
JavaScript 代码
css 代码


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


相关文章推荐
- Ionic Js四:复选框
- Javascript之学习笔记每日更新
- JavaScript
- Js将日期型转换成字符串
- Advanced JavaScript Array Methods: fill and reverse
- onload js函数不执行的原因分析及解决方法
- JSON详解
- Ionic Js三:下拉刷新
- JS代码实现根据时间变换页面背景效果
- 基于JS代码实现图片在页面中旋转效果
- js(javascript)小谈变量声明(显隐声明,声明提前)
- Ionic Js二:背景层
- Ionic Js一:上拉菜单(ActionSheet)
- js 获取当月第一天和最后一天
- 跨域请求京东接口
- js的touch事件的实际引用
- js window.event对象详尽解析
- webpack.config.js
- form表单加js或ajax验证
- JavaScript ---- About GIT