您的位置:首页 > Web前端 > JavaScript

Ionic Js五:单选框操作

2016-06-16 17:10 381 查看
实例中,根据选中的不同选项,显示不同的值。

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;
}






内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: