angularJS-实现内容添加或移除

来源：互联网发布：易语言源码做成软件编辑：程序博客网时间：2024/06/05 06:10
<!DOCTYPE html><html ng-app="myPro"><head><meta charset="UTF-8"><title>angularJS-实现内容添加或移除</title><script src="js/angular.min.js"></script><script src="js/jquery-1.11.0.js" ></script></head><style>*{padding: 0;margin: 0;}ol,ul{list-style: none;}body{background-color: #414246;}.box{width: 500px;height: 300px;border: 1px solid #000000;margin: 100px auto;background-color: #373A3F;color: #A1A6A7;font-size: 12px;}.box .box-l{width: 45%;height: 100%;float: left;border-right: 1px solid #000000;}.box .box-l ul li{width: 91%;height: 20px;line-height: 20px; float: left;margin: 10px 0 0 20px;position: relative;}.box .box-l ul li input{float: left;margin: 3px 3px 0 0;opacity: 0;position: absolute;top: 3px;left: 5px;cursor:pointer;}.box .box-l ul li .pointCheck_icon{width: 15px;height: 15px;float: left;margin: 3px 5px 0 ;background: url(img/banner.jpg) -2px -43px no-repeat;}.box .box-l ul li input:hover+.pointCheck_icon{background-position: -22px -43px;}.box .box-l ul li .pointChecked_icon{background-position: -42px -43px !important;}.box .box-l p{float: left;}.box .box-m{width: 10%;height: 100%;float: left;border: 1px solid #000000;}.box .box-m p{width: 40px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #000000;cursor: pointer;}.box .box-m p:nth-child(1){margin: 120px 0 0 3px;}.box .box-m p:nth-child(2){margin: 10px 0 0 3px;}.box .box-m p:hover{color: #ffffff;}.box .box-r{width: 44%;height: 100%;float: left;}.box .box-r ul li{width: 91%;height: 20px;line-height: 20px; float: left;margin: 10px 0 0 20px;position: relative;}.box .box-r ul li input{float: left;margin: 3px 3px 0 0;opacity: 0;position: absolute;top: 3px;left: 2px;cursor:pointer;}.box .box-r ul li .pointCheck_icon{width: 15px;height: 15px;float: left;margin: 3px 5px 0 ;background: url(img/banner.jpg) -2px -43px no-repeat;}.box .box-r ul li input:hover+.pointCheck_icon{background-position: -22px -43px;}.box .box-r ul li .pointChecked_icon{background-position: -42px -43px !important;}</style><body ng-controller="myProController"><div class="box"><div class="box-l"><ul><li ng-repeat="data in userInfos"><input type="checkbox" autocomplete="off" ng-model="data.checked" ng-click="pointAddClick(data.checked,data.title,data.channelId)"/><div class="pointCheck_icon" ng-class="{pointChecked_icon:data.checked}"></div><p>{{data.title}}</p></li></ul></div><div class="box-m"><p ng-click="add()">添加</p><p ng-click="delete()">移除</p></div><div class="box-r"><ul><li ng-repeat="data in channelList"><input type="checkbox" autocomplete="off" ng-model="data.checked" ng-click="pointDeleteClick(data.checked,data.title,data.channelId)"/><div class="pointCheck_icon" ng-class="{pointChecked_icon:data.checked}"></div><p>{{data.title}}</p></li></ul></div></div></body><script>var pro = angular.module('myPro',[]);pro.controller("myProController",["$scope",function($scope){var userInfo = [{"title":"用户11","channelId":"1"},{"title":"用户22","channelId":"2"},{"title":"用户33","channelId":"3"},{"title":"用户44","channelId":"4"},{"title":"用户55","channelId":"5"},{"title":"用户66","channelId":"6"},{"title":"用户77","channelId":"7"},{"title":"用户88","channelId":"8"},{"title":"用户99","channelId":"9"}];$scope.userInfos = userInfo;$scope.pointAddChannel = [];$scope.pointDeleteChannel = [];$scope.channelList = [];//左侧选中事件$scope.pointAddClick = function(checked,title,channelId){if(checked){$scope.pointAddChannel.push({title:title,checked:false,channelId:channelId});}else{angular.forEach($scope.pointAddChannel,function(i,index){if(i.channelId==channelId){$scope.pointAddChannel.splice(index,1);};});}};//右侧选中事件$scope.pointDeleteClick = function(checked,title,channelId){if(checked){$scope.pointDeleteChannel.push({title:title,checked:false,channelId:channelId});}else{angular.forEach($scope.pointDeleteChannel,function(i,index){if(i.channelId==channelId){$scope.pointDeleteChannel.splice(index,1);};});};};//添加按钮$scope.add = function(){angular.forEach($scope.pointAddChannel,function(i){var bool = true;angular.forEach($scope.channelList,function(j){if(i.channelId==j.channelId){bool = false;};});if(bool){$scope.channelList.push({title:i.title,checked:false,channelId:i.channelId});};});};//移除按钮$scope.delete = function(){angular.forEach($scope.pointDeleteChannel,function(i){angular.forEach($scope.channelList,function(j,index){if(i.channelId==j.channelId){$scope.channelList.splice(index,1);return false;};});});$scope.pointDeleteChannel=[];};}]);</script></html>
阅读全文
0 0