Angularjs custom tag

Angularjs custom tag

Features:

1. Fuzzy search by multiple columns is supported.

2. You can specify output elements in a data template.

Code:

 

/*** Query the Table label in the input box encapsulate the label of the Input type in the * form (and the data needs to be queried in a pop-up window) encapsulate * Project encapsulation label: input Table attribute: table-resultjson = data object returned by the jsonresulta backend -- json array tableuniqueflag = unique table a ID value range: a ~ Z, the first one corresponds to a. and so on. Table-temprow: number of rows in the table -- positive integer table-querycol = 0 default first column as the query field --- positive integer and less than the number of columns table-outcol = 0 default first column as the output result --- positive integer and less than the number of columns */( function () {'use strict '; var app = angular. module ('mhis. direves ves '). directive ('smcssearchinputtable', ['$ compile', '$ parse',' $ modal', partition]); var tabledivtemplate =; var replacetagTemplate =; function smcsSearchInputTable ($ compile, $ parse, $ modal) {function link ($ scope, $ element, $ attrs, $ ctrl) {// label attribute var rowsize = $ attrs. tableTemprow; var tablequerycols = $ attrs. tableQuerycol; // index column var tabarray = new Array (); tabarray = tablequerycols. split (,); // the location of the saved query field var tableoutcol = $ attrs. tableOutcol; // by default, The 0th position element var tableuniqueflag = $ attrs of the selected row is output. tableUniqueflag; // the unique table identifier var tableresultjson = $ attrs. tableResultjson; // the ID of the data source returned by the backend. var tableshowcols = $ attrs. tableShowcols; // data template var mydivlocation = # tablediv + tableuniqueflag; // id value of tablediv var tablediv = tablediv + tableuniqueflag; // tablediva tabledivb .. tabledivtemplate ='

'; Var keyword =; // the content of the text input box var patternum =/^ [1-9] + [0-9] * $/; // 0 ~ 9 positive integer if (! Patternum. test (rowsize) {alert (enter a positive number); return false ;}// create a table. $ 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); Metadata (mydivlocation).html (''). append ($ compile (table) ($ scope);} // when the mouse focus is moved in, query the matched data and fill the table for display. $ Scope. showtablediv = function () {keyword = document. getElementById (inputable + tableuniqueflag ). value; // the content of the input box is used as the query keyword var resultjsondata = $ scope [tableresultjson]; // the data source resultjson ~ Z var resultjsondatalen = resultjsondata. length; var showtablecols = $ scope [tableshowcols]; // display the data template var cells = showtablecols. length; // Number of columns var rows = parseInt (rowsize); // number of rows var colattrs = new Array (); // attribute field var titlecols = new Array (); // table header var filterindexs = new Array (); // Save the query position if (keyword. trim () =) {return;} // table Header & attribute field for (var k = 0; k '; ReplacetagTemplate = tabledivtemplate + replacetagTemplate; $element.html (''). append ($ compile (replacetagTemplate) ($ scope);} return {restrict: 'E', link: link, scope: true, // separate templates for scopes: replacetagTemplate };}})();

 

Data Source and Data Template definition code:

 

(Function () {var app = angular. module ('smcs. app '); app. controller ('medicareinstitutioninfomaintainctrl ', [' $ scope ',' $ http', 'baseurl', '$ modal', 'modal', function ($ scope, $ http, BaseURL, $ modal, Modal) {// The data object returned by the backend $ scope. jsonresulta = [{testname: a Zhang San, sex: Male, addr: Tianjin, tel: 138}, {testname: a dog, sex: Male, addr: Shanghai, tel: 138 },{ testname: a Wang Wu, sex: Male, addr: Beijing, tel: 138 },{ testname: a zhangwu, sex: Male, addr: Beijing, tel: 138 },{ testname: a Hua Mulan, sex: female, addr: Beijing, tel: 138},]; $ scope. showtablecolsa = [{label: 'name', map: 'testname'}, {label: 'gender ', map: 'sex'}, {label: 'address', map: 'addr '},]; $ scope. jsonresultb = [{testname: B Zhang San, sex: Male, addr: Tianjin, tel: 138}, {testname: B Dog, sex: Male, addr: Shanghai, tel: 138 },{ testname: B Wang Wu, sex: Male, addr: Beijing, tel: 138 },{ testname: B zhangwu, sex: Male, addr: Beijing, tel: 138 },{ testname: B Hua Mulan, sex: female, addr: Beijing, tel: 138},]; $ scope. showtablecolsb = [{label: 'name', map: 'testname'}, {label: 'gender ', map: 'sex'}, {label: 'address', map: 'addr '},] ;}]) ;}()

 

 

Custom labels:

Html source code

 

Name	Gender	Address
A zhangsan	Male	Tianjin
A dog	Male	Shanghai
A zhangwu	Male	Beijing