Angular如何進行列表排序

來源:酷知科普網 2.34W

工具/材料

Sublime Text

操作方法

開啟Sublime Text軟體,新建一個目錄結構,在目錄裡面新增angular的js庫檔案和html檔案,如下圖所示

Angular如何進行列表排序

接下來我們在html檔案裡面通過script標籤引入angular的js指令碼檔案,如下圖所示

Angular如何進行列表排序 第2張

然後我們在指令碼標籤裡面實現一個控制器,並且在scope上下文中準備一個列表資料,如下圖所示

Angular如何進行列表排序 第3張

接下來需要準備table列表,在table列表裡面通過ng-repeat命令遍歷準備好的陣列,如下圖所示

Angular如何進行列表排序 第4張

準備好頁面以後,我們執行程式,你就會在頁面中看到如下圖所示的列表資料,這個資料和你剛才準備時的順序是一樣的

Angular如何進行列表排序 第5張

接下來我們在列表裡面通過orderBy命令來對列表進行排序,這裡是按年齡排序的,所以在中括號裡面要跟上age欄位,如下圖所示

Angular如何進行列表排序 第6張

最後我們重新執行頁面,你就會看到列表裡面的資料已經按照年齡從小到大進行排列了,如下圖所示

Angular如何進行列表排序 第7張
熱門標籤