angularjs自定义标签

页面导航:首页 > 网络编程 > JavaScript > angularjs自定义标签

angularjs自定义标签

来源: 作者: 时间:2016-01-22 08:39 【

具有功能:1 支持按多列进行模糊查询。2 数据模板可以指定输出元素。代码: ** * 查询输入框表格标签封装 * form表单中input类型为text的标签(并且需要弹窗查询数据)封装 * 项目封装标

\

具有功能:

1 支持按多列进行模糊查询。

2 数据模板可以指定输出元素。

代码:

 

/**
 * 查询输入框表格标签封装
 * form表单中input类型为text的标签(并且需要弹窗查询数据)封装
 * 项目封装标签:Input Table
   属性: table-resultjson=jsonresulta 后端返回的数据对象--json数组
		tableuniqueflag=a	表格唯一标识取值范围a~z,第一个对应为a.以此类推。
		table-temprow: 表格的行数--正整数
		table-querycol=0  默认第一列作为查询字段---正整数且小于列数
		table-outcol=0	默认第一列作为输出结果---正整数且小于列数
 */
(function(){
	'use strict';
	
	var app = angular.module('mhis.directives')
		.directive('smcsSearchInputTable',['$compile','$parse','$modal',smcsSearchInputTable]);
	var tabledivtemplate=;
	var replacetagTemplate=;
    
	function smcsSearchInputTable($compile,$parse,$modal){
	    	
		function link($scope, $element, $attrs, $ctrl) {
    			
			//标签属性
			var rowsize = $attrs.tableTemprow;
			var tablequerycols = $attrs.tableQuerycol;//索引列
			var tabarray=new Array();
			tabarray=tablequerycols.split(,);//存查询字段的位置
			var tableoutcol = $attrs.tableOutcol;//默认输出选中行的第0个位置元素
			var tableuniqueflag = $attrs.tableUniqueflag;//表格唯一标识
			var tableresultjson = $attrs.tableResultjson;//后端返回的数据源标识
			var tableshowcols = $attrs.tableShowcols;//数据模板
			var mydivlocation=#tablediv+tableuniqueflag;//tablediv的id值
			var tablediv=tablediv+tableuniqueflag;//tablediva tabledivb..
			tabledivtemplate='
'; var keyword = ;//文本输入框的内容 var patternum=/^[1-9]+[0-9]*]*$/;//0~9正整数 if (!patternum.test(rowsize)){ alert(请输入正数字); return false; } //创建表格。 $scope.createMyTable = function (rowCount,cellCount){ var table=$(''); table.appendTo($(mydivlocation)); for(var i=1;i); tr.appendTo(table); for(var j=1;j); td.appendTo(tr); } } tr.appendTo(table); $(mydivlocation).html('').append($compile(table)($scope)); } //鼠标焦点移入时,查询匹配的数据,填充表格进行显示。 $scope.showtablediv= function (){ keyword=document.getElementById(inputable+tableuniqueflag).value;//输入框内容作为查询的关键字 var resultjsondata=$scope[tableresultjson];//数据源resultjson a~z var resultjsondatalen=resultjsondata.length; var showtablecols=$scope[tableshowcols];//显示数据模板 var cells=showtablecols.length;//列数 var rows=parseInt(rowsize);//行数 var colattrs = new Array();//属性字段 var titlecols =new Array();//表格头 var filterindexs=new Array();//保存查询位置 if(keyword.trim()==){return ;} //表格头&&属性字段 for(var k=0;k'; replacetagTemplate=tabledivtemplate+replacetagTemplate; $element.html('').append($compile(replacetagTemplate)($scope)); } return { restrict: 'E', link:link, scope:true,//作用域分开 template: replacetagTemplate }; } })();

 

数据源和数据模板定义代码:

 

(function(){
	var app = angular.module('SMCS.App');

	app.controller('MedicareInstitutionInfoMaintainCtrl', ['$scope','$http', 'BaseURL','$modal','Modal',function($scope,$http,BaseURL,$modal,Modal){

	//后端返回数据对象
	$scope.jsonresulta = [{ testname: a张三, sex: 男,addr:天津,tel:138},
			{ testname: a张狗, sex: 男,addr:上海,tel:138},
			{ testname: a王武, sex: 男,addr:北京,tel:138},
			{ testname: a张武, sex: 男,addr:北京,tel:138},
			{ testname: a花木兰, sex: 女,addr:北京,tel:138},
			];
		
	$scope.showtablecolsa = [
			{ label: '姓名', map: 'testname'},
			{ label: '性别', map: 'sex'},
			{ label: '住址', map: 'addr'},
			];		
		
	$scope.jsonresultb = [{ testname: b张三, sex: 男,addr:天津,tel:138},
			{ testname: b张狗, sex: 男,addr:上海,tel:138},
			{ testname: b王武, sex: 男,addr:北京,tel:138},
			{ testname: b张武, sex: 男,addr:北京,tel:138},
			{ testname: b花木兰, sex: 女,addr:北京,tel:138},
			];
	
	$scope.showtablecolsb = [
			{ label: '姓名', map: 'testname'},
			{ label: '性别', map: 'sex'},
			{ label: '住址', map: 'addr'},
			];
        
	}]);
})()


 

 

自定的标签为:


html

 


姓名 性别 住址
a张三 天津
a张狗 上海
a张武 北京


 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<