table樣式的下拉框（angularjs）

前言

雖然使用的技術比較老了，可是思想卻仍是適用於如今的vue等框架。

一：實現的樣式

 

二：實現包括的功能點

1：下拉框內容是表格，相似於一個彈窗

• 表格內容最多六行，超出的顯示滾動條，表頭固定，可滾動。
• 支持鍵盤上下鍵，進行當前項的選擇
• 支持鍵盤的enter選擇鍵，並支持回調函數，進行頁面的數據綁定
• 支持加載後臺數據
• 支持綁定指令的input框對數據的搜索功能
• 支持input框填寫的內容的校驗，若是內容是手寫的，則清空，必須是從選擇框內選擇的（點擊選擇或者enter選擇）等功能
• 支持後臺無數據時，顯示無加載內容。
• 在請求後臺時，在當前下拉框添加加載等待動畫。

2：下拉內容是常見的select框形式

• 內容與表格基本一致
• 存在即有使用的地方，可根據本身的須要決定是否使用。

功能點總結：其實與原生的select下拉框形式同樣，只不過是進行了一次封裝，添加了與後臺交互的邏輯。沒辦法，全部的實現都是由於需求的存在，說激進點，若是不是產品想出這個需求，我也不會去作。添加一句：萬惡的產品。

三：實現的邏輯

封裝一個angularjs的指令，經過傳參將指令須要用到的數據從父層傳到子層。指令控制如何展現與一些交互。父子只有數據的傳輸，沒有操做上的控制。

首先，咱們知道angularjs指令能夠獲取到父元素的方法，雙向綁定的數據，常量字符串等。

1. 對當前input框進行指令綁定，進行父子級的通訊，傳參大概包括：數據請求函數，渲染的類型（table select data city等，只要有數據，再進行頁面UI修改便可），下拉彈窗的大小值指定，沒有數據時下拉框顯示的新建按鈕名稱與綁定的事件，當前input上綁定的model（用來作清空input）

2. 當所須要的傳參數據所有都有時，須要對下拉彈窗裏的內容進行事件綁定，包括：input的focus調用後臺接口，blur進行input的清空（填寫的數據不符合要求時），上下鍵對當前渲染的項進行選擇，enter鍵觸發數據綁定。
3. 根據數據進行渲染彈窗類型，使用ng-if進行彈窗內容的UI顯示。好比ng-if==table ng-if==select 進行彈窗渲染。

四：實現的代碼思想分析：

1. angularjs的指令進行父子通訊時，須要注意的就是scope的取值，傳函數表達式時，scope = ‘&’ ，傳model時 scope = ‘=’ ，傳固定值時 scope='@' 
2. 一些函數寫在父級ctr裏，好比請求後臺的函數。由於不一樣的頁面須要，可能數據返回成功後有不一樣的操做，因此這個很差封裝在指令裏，須要保持指令的活性，若是你不想將請求後臺的數據放在父controller裏，也能夠將請求地址傳給指令，這樣就能夠在指令（子層）進行請求。
3. table渲染時，也是封裝了一個指令，這樣以後在須要用到這個table指令時，能夠較好較快的抽出使用

五：重點分析下拉框的table實現

　　本文只去進行table的實現，這樣用戶能夠本身進行擴展。

1. 指令html
2. 父級ctroller
3. 指令js

 

六：後續擴展與補充

1. 若是在進行後臺數據交互時，只針對當前input框內的model進行操做，能夠將後臺接口傳到指令裏，在指令裏進行數據的交互，這樣就徹底脫離父級，成爲一個獨立的指令，至關於一個angularjs的插件。