AngularJs多选框点击确认按钮弹出对应的值

最新推荐文章于 2021-10-08 14:59:29 发布

meng_c_

最新推荐文章于 2021-10-08 14:59:29 发布

阅读量794

点赞数

本文链接：https://blog.csdn.net/thw_m/article/details/78289156

版权

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

               //计数器
                   var a = 0;
               //选中按钮的事件
               $scope.selectc = function(index){
                   //alert(index);当前的下标,对应数组下标
                   if($scope.arr[index].check==true){
                       //如果有一个选中就 a++
                       a++;
                   }else{
                       //如果取消了选中,就--
                       a--;
                   }
                   };
                   //点击确定时候判断有几个选中了
                   $scope.queren = function(){
                       //判断a的值
                       if(a==0){
                           //一个也没选中
                           alert("请选择");
                       }else{
                           //弹出对应的1,2,3
                           for(var i=0;i<$scope.arr.length;i++){
                               if($scope.arr[i].check == true){
                                   alert($scope.arr[i].key);
                               }
                           }
                       }
                   };



           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <ul ng-repeat="i in arr">
               
<input type="checkbox" ng-model="i.check" ng-click="selectc($index)"/>{{i.value}}
           </ul>
           <button ng-click="queren()">确认</button>
       </center>
   </body>
</html>

---------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../AngularJS库/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
                   //数组
               $scope.arr = [{
                   key:"1",
                   value:"这是第一项"

               },{
                   key:"2",
                   value:"这是第二项"

               },{
                   key:"3",
                   value:"这是第三项"

               },{
                   key:"4",
                   value:"这是第四项"

               }];

               //数组
               $scope.newarr = [];
               //点击事件
               $scope.selectc = function(state,text){
                   if(state){
                       //如果选中了,对应的值放进新数组
                       $scope.newarr.push(text);
                   }else{
                       //如果取消选中了,删除数组中的值
                       for(var i=0;i<$scope.newarr.length;i++){
                           if($scope.newarr[i] == text){
                               $scope.newarr.splice(i,1);
                           }
                       }
                   }
               };

               //确认按钮的点击事件
               $scope.queren = function(){
                   if($scope.newarr.length==0){
                       //如果没有任何值存进数组,就是没选中
                       alert("请选择");
                   }else{
                       alert($scope.newarr);
                   }
               };
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
       <ul ng-repeat="i in arr">
   <input type="checkbox" ng-model="state" ng-click="selectc(state,i.key)"/>{{i.value}}
       </ul>
       <button ng-click="queren()">确定</button>
       </center>
   </body>
</html>

meng_c_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs多选框点击确认按钮弹出对应的值

var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ //数组 $scope.arr = [{ key:"1", v
复制链接

扫一扫