ionic 单选框操作

最新推荐文章于 2024-06-02 17:22:30 发布

原创最新推荐文章于 2024-06-02 17:22:30 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

杂谈专栏收录该内容

2 篇文章

订阅专栏

博客给出一个实例，根据选中的不同选项显示不同的值。包含 HTML 代码和 JavaScript 代码，JavaScript 代码中定义了客户端和服务器端列表，以及数据和服务器端选择变化的处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例中，根据选中的不同选项，显示不同的值。
HTML 代码

当选按钮

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

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

});