angularjs实现checkbox复选框单选

本文介绍了如何使用AngularJS实现复选框的单选功能。在控制器中定义了相关变量和方法,通过ng-model和ng-change指令与视图交互,当复选框状态改变时,更新选定值并确保只有一个选项被选中。具体实现包括在HTML页面中使用ng-repeat遍历数据,并结合ng-model和自定义的checkboxChoosed函数来达到单选效果。
摘要由CSDN通过智能技术生成

angularjs实现checkbox复选框单选

首先在controller中声明变量,实现方法

 $scope.index = "";
 $scope.selected = ""; //被选择的值
 $scope.num = 1; //计数
 $scope.list = [{name:"123"},{name:"321"}];
  //实现checkbox实现单选功能
$scope.checkboxChoosed = function (item, id) {
     $scope.index = id;
     $scope.num = 1;
     if(item.checked){
	     if(!$scope.selected){
	         $scope.selected = item;
	         $scope.selected.checked =true;
	     }
	     if($scope.selected !== item){
	         $scope.selected.checked =false;
	         $scope.selected = item;
	     }
     }else{
     	 $scope.num = 0;
     }
 }
 

html页面实现方式

<div class="contents" ng-repeat="item in list">
	<span><input type="checkbox" ng-model="item.checked" class="checkbox1" ng-change="checkboxChoosed(item,$index)"></span>
    <span class="span1">{{item.name}}</span>
 </div>
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值