如何利用AngularJS和Bootstrap框架獲取table行

有一張表格,利用Bootstrap設置其樣式,AngularJS獲取表格的數據。根據按鈕點擊事件,獲取表格行數據,然後分別按照列來裝到數組中,並列印數組的結果。下面利用一個實例實現這個場景,操作如下:

工具/原料

AngularJS
Bootstrap
HBuilder
截圖工具
瀏覽器

方法/步驟

第一步,打開HBuilder軟體,創建web項目,並在web項目中創建靜態頁面,引入Bootstrap和AngularJS相關的js文件和css文件,如下圖所示:

第二步,在主體元素內插入一個表格,表格記錄數有10條,如下圖所示:

第三步,在表格上方插入一個按鈕「獲取行值」,並設置按鈕樣式,如下圖所示:

第四步,在最外層div標籤元素內加入ng-app和ng-controller指令,如下圖所示:

第五步,編寫獲取表格行值,並將行值按照列欄位來分別裝入數組中,如下圖所示:

第六步,預覽該靜態頁面,並點擊「獲取行值」按鈕,查看列印情況,如下圖所示:

注意事項

注意利用Bootstrap控制表格樣式
注意利用AngularJS控制按鈕事件

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場