angularjs实现checkbox复选框单选

小洋鬼666

于 2021-01-28 09:42:14 发布

阅读量578

点赞数 2

文章标签： javascript angular 前端 html

本文链接：https://blog.csdn.net/qq_40313024/article/details/113307726

版权

本文介绍了如何使用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>

小洋鬼666

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现checkbox复选框单选

angularjs实现checkbox复选框单选首先在controller中声明变量，实现方法 $scope.index = undefined; $scope.selected = ""; //被选择的值 $scope.num = 1; //计数 $scope.list = [{name:"123"},{name:"321"}]; //实现checkbox实现单选功能$scope.checkboxChoosed = function (item, id) { $scope.ind
复制链接

扫一扫