angular 复选框回选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html ng-app= "myApp" > <head> <meta charset= "UTF-8" > <title></title> <script type= "text/javascript" src= "js/angular.min.js" ></script> </head> <body ng-controller= "main" > <div ng-repeat= "item in list" > <input type= "checkbox" ng- checked = "isSelect(item.id)" value= "item.id" ng-click= "select(item.id,$event)" />{{item.device}} </div> <div>{{result}}</div> <script> var app = angular.module( 'myApp' ,[]); app.controller( 'main' ,[ '$scope' ,function($scope) { $scope.list = [ { 'id' :1, 'device' : '摄影' }, { 'id' :2, 'device' : '视屏' }, { 'id' :3, 'device' : '音乐' } ] $scope.result = [1]; //默认选中1 $scope. select = function(id, event ) { console.log( event ); var action = event .target; console.log(action); if (action. checked ) { //选中添加 if ($scope.result.indexOf(id) == -1) { $scope.result.push(id); } } else { //不选中删除 var selectId = $scope.result.indexOf(id); if (selectId !=-1) { $scope.result.splice(selectId,1); } } } $scope.isSelect = function(id) { return $scope.result.indexOf(id) != -1; } }]); </script> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步