HTML angular多选框

来源：互联网发布：java junit自动化测试编辑：程序博客网时间：2024/05/29 17:25

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

阅读全文

0 0