angularjs自訂標籤

angularjs自訂標籤

具有功能：

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張武	男	北京