當前位置:妙知谷 >

遊戲數碼 >IT技術 >

Angular如何進行列表排序

Angular如何進行列表排序

工具/材料

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張
標籤: Angular 列表
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/m820o.html