"+""-"图片收缩展开页面内容的指令

最新推荐文章于 2019-12-25 14:27:30 发布

最新推荐文章于 2019-12-25 14:27:30 发布 · 259 阅读

文章标签：

#javaScript #angular #angularJS #directive #ViewUI

AngularJS 专栏收录该内容

85 篇文章

订阅专栏

本文介绍三种使用AngularJS实现详情展开的方法：借助JQuery操作DOM、纯AngularJS方式及加强版实现。通过不同方法展示了如何控制内容的显示与隐藏。

实现效果

打开页面或点击“-”后，页面不显示明细信息：

点击“+”后，页面显示明细信息：

实例一：借助JQuery操作DOM实现

<!doctype html>
<html ng-app="toggle">
  <head>
  	<script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/angular.js"></script>
    <script src="js/ToggleDirective01.js"></script>
  </head>
  <body>
    <div ng-controller="BJControl">
      <span>账单总额：280.4</span>
      <br>
      <span ext-toggle="{label: '账单明细', showModel: 'ctrl.isShowDetailInfo'}"></span>
      <table ng-show="ctrl.isShowDetailInfo" border="1" width="75%">
	      <tr>
             <td width="30%">借款人</td>
             <td width="30%">借款金额</td>
             <td width="40%">借款时间</td>
	      </tr>
	      <tr>
	      	<td>张三</td>
	      	<td>100.2</td>
	      	<td>201.01.09</td>
	      </tr>
	      <tr>
	      	<td>李四</td>
	      	<td>180.2</td>
	      	<td>201.03.09</td>
	      </tr>
      </table>
    </div>
  </body>
</html>

function BJControl($scope) {
  $scope.ctrl = {
    isShowDetailInfo : false
  };
}

var md = angular.module('toggle', []);

//作用：plus/minus切换ng-show 
//用法：<span ext-toggle="{label: '账单明细', showModel: 'ctrl.isShowDetailInfo'}"></span>
md.directive('extToggle', ['$parse', '$compile', function($parse, $compile){
	'use strict';
	var countNum = 1;
	return {
		restrict: 'A',
		link: function(scope, el, attrs, ctrl){
			var opts = scope.$eval(attrs.extToggle) || {};
			if(!opts.showModel)
				return;

			var showImgPathModel = opts.showModel + '_toggleImgPath';
			var getterImg = $parse(showImgPathModel);
			var setterImg = getterImg.assign;

			// 显示了就显示减号
			var getter = $parse(opts.showModel);
			setterImg(scope, 'img/' + (getter(scope) ? 'minus' : 'plus') + '.png');

			var suf = countNum++;
			scope['toggle_' + suf]  = function(){
				var setter = getter.assign;
				var isShow = getter(scope);

				if(isShow){
					setterImg(scope, 'img/plus.png');
					setter(scope, false);
				}else{
					setterImg(scope, 'img/minus.png');
					setter(scope, true);
				}
			};

			//加上id属性，是为了在模型变化的时候，图片也得跟着变。需要执行dom的click方法
			var tpl = '<img ng-src="{{' + 
				showImgPathModel +  
				'}}" ng-click="toggle_' + suf + '()" id="' + opts.showModel.replace('.', '_') + '"/>';
			if(opts.label)
				tpl += '&nbsp;<label>' + opts.label + '</label>';

			var innerEl = $(tpl);
			innerEl.appendTo(el);
			$compile(innerEl)(scope);
		}
	};
}]);

实例二：纯AngularJS实现

<!doctype html>
<html ng-app="toggle">
  <head>
    <script src="lib/angular.js"></script>
    <script src="js/ToggleDirective02.js"></script>
  </head>
  <body>
    <div ng-controller="BJControl">
      <span>账单总额：280.4</span>
      <br>
      <span ext-toggle="" show-model="ctrl.isShowDetailInfo">账单明细</span>
      <table ng-show="ctrl.isShowDetailInfo" border="1" width="75%">
	      <tr>
             <td width="30%">借款人</td>
             <td width="30%">借款金额</td>
             <td width="40%">借款时间</td>
	      </tr>
	      <tr>
	      	<td>张三</td>
	      	<td>100.2</td>
	      	<td>201.01.09</td>
	      </tr>
	      <tr>
	      	<td>李四</td>
	      	<td>180.2</td>
	      	<td>201.03.09</td>
	      </tr>
      </table>
    </div>
  </body>
</html>

function BJControl($scope) {
  $scope.ctrl = {
    isShowDetailInfo : false
  };
}

var md = angular.module('toggle', []);

//作用：plus/minus切换ng-show 
//用法：<span ext-toggle="" show-model="ctrl.isShowDetailInfo">账单明细</span>
md.directive('extToggle', ['$parse', function($parse){
	'use strict';
	return {
		restrict: 'A',
		
		scope: {
			showModel: '='
		},
		transclude: true,
		template: '<span ng-click="toggleShow();"><img ng-src="{{imgPath}}">&nbsp;<label ng-transclude></label></span>', 
		replace: true, 

		link: function(scope, el, attrs, ctrl){
			scope.imgPath = 'img/plus.png';
			scope.$watch('showModel', function(val){
				if(val){
					scope.imgPath = 'img/minus.png';
				}else{
					scope.imgPath = 'img/plus.png';
				}
			});
			scope.toggleShow = function(){
				scope.showModel = !scope.showModel;
			};
		}
	};
}]);

实例三：AngularJS加强版实现

<!doctype html>
<html ng-app="toggle">
  <head>
    <script src="lib/angular.js"></script>
    <script src="js/ToggleDirective03.js"></script>
  </head>
  <body>
    <div ng-controller="BJControl">
      <span>账单总额：280.4</span>
      <br>
      <span ext-toggle="{showModel: 'ctrl.isShowDetailInfo'}">账单明细</span>
      <table ng-show="ctrl.isShowDetailInfo" border="1" width="75%">
	      <tr>
             <td width="30%">借款人</td>
             <td width="30%">借款金额</td>
             <td width="40%">借款时间</td>
	      </tr>
	      <tr>
	      	<td>张三</td>
	      	<td>100.2</td>
	      	<td>201.01.09</td>
	      </tr>
	      <tr>
	      	<td>李四</td>
	      	<td>180.2</td>
	      	<td>201.03.09</td>
	      </tr>
      </table>
    </div>
  </body>
</html>

function BJControl($scope) {
  $scope.ctrl = {
    isShowDetailInfo : false
  };
}

var md = angular.module('toggle', []);
//作用：plus/minus切换ng-show 
//用法：<span ext-toggle="{showModel: 'ctrl.isShowDetailInfo'}">账单明细</span>
md.directive('extToggle', ['$parse', function($parse){
	'use strict';
	return {
		restrict: 'A',
		scope: true,
		transclude: true,
		template: '<span ng-click="toggleShow();"><img ng-src="{{imgPath}}">&nbsp;<label ng-transclude></label></span>', 
		replace: true, 

		link: function(scope, el, attrs, ctrl){
			var opts = scope.$eval(attrs.extToggle) || {};
			if(!opts.showModel)
				return;
			scope.imgPath = 'img/plus.png';
			scope.$watch(opts.showModel, function(val){
				if(val){
					scope.imgPath = 'img/minus.png';
				}else{
					scope.imgPath = 'img/plus.png';
				}
			});
			
			scope.toggleShow = function(){
				var getter = $parse(opts.showModel);
				var setter = getter.assign;
				
				var oldShowVal = getter(scope) || false;
				setter(scope, !oldShowVal);
			};
		}
	};
}]);