ionic多选框

最新推荐文章于 2024-06-15 12:47:25 发布

LWT000aa

最新推荐文章于 2024-06-15 12:47:25 发布

阅读量698

点赞数

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