ionic多选框redio

最新推荐文章于 2021-08-16 17:35:12 发布

原创最新推荐文章于 2021-08-16 17:35:12 发布 · 231 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何在Ionic应用中实现多选框（Checkbox）和单选框（Radio Button）的功能，包括它们的HTML结构、CSS样式以及与Angular绑定的数据交互。通过实例代码展示如何创建和控制选项的选中状态，帮助开发者更好地理解并运用到实际项目中。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.data = [{
key:"1",
value:"这是第一项"
},{
key:"2",
value:"这是第二项"
},{
key:"3",
value:"这是第三项"
},{
key:"4",
value:"这是第四项"
}];

$scope.arr = [];
$scope.fun = function(flag,text){
//alert(flag);
if(flag){
//alert("asf");
$scope.arr.push(text);
}else{
for(i in $scope.arr){
if($scope.arr[i] == text){
$scope.arr.splice(i,1);
}
}
}
//alert($scope.arr.length);
}

//确认按钮的点击事件
$scope.check = function(){
if($scope.arr.length==0){
alert("请先选择");
}else{
alert($scope.arr);
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<button ng-click="check()">确认</button>
<ul ng-repeat="i in data">
<input type="checkbox"
name="check"
ng-value="i.key"
ng-model="flag"
ng-click="fun(flag,i.key)"
/>
{{i.value}}
</ul>
</center>
</body>

</html>