angularjs 的一个图片列表指令

最新推荐文章于 2022-05-26 16:30:38 发布

落雁沙-Bane

最新推荐文章于 2022-05-26 16:30:38 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs 图片 bootstrap

本文链接：https://blog.youkuaiyun.com/fengxiaotx/article/details/41822755

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS和Bootstrap创建的图片列表指令，该指令能够实现图片展示、缩放、选择及删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个基于angulsrjs 和bootstrap样式的图片列表指令

js部分代码如下

	var app=angular.module("test",["bane/image/showgrid.html"])
	.directive("baneImggrid",function(){
		return {
			    restrict:'EA',
				transclude: true,
				replace: false,
				//templateUrl: "template/image(1).html",
				templateUrl:"bane/image/showgrid.html",
				scope:{
						baneItems:'=',
						smSrc:'@',
						orgSrc:'@',
						radioText:'@',
						radioValue:'@',
						radioShow:'=',
						deleteShow:'=',
						selectItem:'=',
						itemDelete:'=',
						//beforeDelete:'&'
					},
				link:function(scope, element, attrs,contr){
						scope.selectItem={"cover":""};
						scope.orgSrc=(scope.orgSrc?scope.orgSrc:scope.smSrc);
						scope.smSize={};
						if(attrs.smWidth){
							scope.smSize.width=attrs.smWidth;
							}
						if(attrs.smHeight){
								scope.smSize.height=attrs.smHeight;
							}	
						scope.showBigBox=function(index){
								scope.baneItems[index].baneBigImageShow=true;							
							}
						scope.closeBox=function(index){
								scope.baneItems[index].baneBigImageShow=false;	
							}
						scope.deleteItem=function(index){
								scope.itemDelete=scope.baneItems[index];
								//scope.beforeDelete();
								scope.baneItems.splice(index, 1);
							}								
					}
			}
		});
		
		
angular.module("bane/image/showgrid.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("bane/image/showgrid.html",
	'<div class="col-xs-6 col-md-3" style="width:auto; " ng-repeat="item in baneItems ">'+
	'    <div class="thumbnail" style="cursor:pointer;position:relative;"  >'+
	'    	<img ng-src="{{item[smSrc]}}"  ng-style="smSize" ng-click="showBigBox($index)"/> '+
	'    	<div style=" position:absolute; bottom:4px;background: rgba(225,225,225,0.5); right: 4px;left: 4px; text-align:right;">'+
	'        	<span style="float:left;" ng-show="radioShow"><input type="radio"  ng-model="selectItem.cover"  value="{{item[radioValue]}}" /><label>{{radioText}}</label></span>'+
	'            <i class="glyphicon glyphicon-search" ng-click="showBigBox($index)" style="margin: 2px 5px;"></i>'+
	'            <i class="glyphicon glyphicon-trash" ng-click="deleteItem($index)" style="margin: 2px 5px;" ng-show="deleteShow"></i>'+
	'        </div>'+
	'    </div>'+
	'    <div class="modal fade bs-example-modal-lg in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false" style=" padding-right: 15px; display:block" ng-show="item.baneBigImageShow">'+
	'		<div class="modal-backdrop fade in"></div>'+
	'    		<div class="modal-dialog modal-lg" style="z-index:1100;">'+
	'      			<div class="modal-content">'+
	'        			<div class="modal-header">'+
	'          				<button type="button" class="close" data-dismiss="modal" ng-click="closeBox($index)"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+
	'        			</div>'+
	'        		<div class="modal-body" style="text-align:center;">'+
	'       		 		<img ng-src="{{item[orgSrc]?item[orgSrc]:item[smSrc]}}" style="max-width:100%;"/>'+
	'        		</div>'+
	'      		</div>'+
	'    	</div>'+
	'  	</div>'+
	'</div>'
	);
}]);

demo下载