angularJS-实现内容添加或移除

最新推荐文章于 2021-06-19 07:37:18 发布

艾斯德斯的博客

最新推荐文章于 2021-06-19 07:37:18 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_36898102/article/details/77985336

版权

angularJs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
angularJS-实现内容添加或移除

angularJS-实现内容添加或移除 *{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;ba
复制链接

扫一扫