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

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

工具/原料

AngularJS
Bootstrap
HBuilder
截圖工具
瀏覽器

方法/步驟

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

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

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

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

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

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

注意事項

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

相關文章

  1. 如何利用AngularJS框架實現加法運算功能

    AngularJS框架中常用的兩個指令ng-app和ng-controller,可以利用它們設計出一個加法運算功能,兩個輸入框和一個結果輸入框,點擊按鈕計算出結果.下面利用一個實例實現這個功能,如下圖 ...
  2. 如何利用ionic框架製作下拉框並利用AngularJS值

    ionic框架中有控制項select,利用AngularJS給下拉框賦值.AngularJS利用ng-app.ng-controller和ng-repeat指令循環遍歷下拉框值,利用一個具體實例來說明下 ...
  3. 如何利用AngularJs快速搭建前端基本框架

    AngularJs是一款以前後端分離為優勢的前端框架,也有人將其稱為MVC*框架,它在用戶數據交互方面顯示出強大的功能,這個主要依賴於它的數據綁定功能.此篇經驗我主要來講一下如何入門開始寫基於Angu ...
  4. 如何利用AngularJS框架實現form表單提交和重置

    AngularJS和Bootstrap框架結合起來使用,Bootstrap設置form表單樣式,AngularJS控制form表單邏輯.下面利用一個實例說明AngularJS框架實現form表單提交和 ...
  5. 如何利用AngularJS框架中指令控制元素顯示隱藏

    AngularJS框架利用指令控制元素標籤顯示或隱藏,使用ng-model指令綁定數據,ng-hide指令控制元素的顯示或隱藏,如果值為true則為隱藏,否則為顯示.下面利用一個具體實例說明元素顯示隱 ...
  6. 如何利用AngularJS框架指令混合綁定數據

    AngularJS指令是擴展的HTML標籤,類似HTML的標籤元素,其中常用的指令有ng-app.ng-controller.ng-model.ng-bind等.下面利用AngularJS中的幾種指令 ...
  7. 如何利用AngularJS框架遍歷生成動態的下拉框

    下拉框是系統或平台常用的一種控制項,可以展示不同的選項,可以單選也可以多選.AngularJS框架中的下拉框是有ng-repeat指令循環生成數據源,利用控制器和初始化生成下拉框.下面利用一個實例實現這 ...
  8. 【前端框架】bootstrap框架的引入使用

    這是一款開源免費的前端框架,能夠幫助我們很快速的搭建一個頁面,優化代碼,符號w3c標準,並且兼容IE6及以下瀏覽器. 方法/步驟 首先要進入官網,我們直接百度bootstrap,看得有個中文網,進入就 ...
  9. 利用python在東方財富網獲取股票代碼

    利用python在東方財富網獲取股票代碼 方法/步驟 import urllib.request import re stock_CodeUrl = 'http://quote.eastmoney.c ...
  10. Bootstrap框架的簡單登錄界面設計

    Bootstrap框架的簡單登錄界面設計 方法/步驟 Bootstrap本身的樣式雖然能夠幫助我們快速地開發出一個Web頁面,但要想達到更高的一個層次,我們還需修改並且添加自己的樣式,並配合使用一些其 ...
  11. angularjs和bootstrap整合入門(一)

    以前只是聽過angularjs和bootstrap,最近做了一個入門的教程,供大家參考! 工具/原料 bootstrap angularjs 方法/步驟 添加bootstrap和angularjs.j ...
  12. 玩網頁遊戲利用360網頁遊戲中心獲取禮包

    是不是在玩網頁遊戲時沒有快感,沒有特權,可以利用360網頁遊戲中心獲取禮包來比他人獲取更多的遊戲禮品 工具/原料 360網頁 瀏覽器 360帳號 360安全管家 方法/步驟 可以在有360安全軟體的用 ...
  13. 利用百度「新鮮事」引導網站獲取流量

    最近打開百度突然發現一個奇妙的推廣手段,今天心情還不錯,就拿出來和大家分享一下,大家都知道目前百度是國內最大的搜尋引擎,平均每天上億人訪問,以達到獲取信息,找到所求.如果能利用好百度這塊"肥 ...
  14. 利用谷歌和EXCEL批量獲取文件詳細信息(索引)

    如何快速的獲取資源管理器中的文件夾里的文件索引呢,因為資源管理器並不支持複製和粘貼的功能,所以我們可以藉助谷歌瀏覽器來實現這一功能. 方法/步驟 在資源管理器打開要批量獲取文件詳細信息的文件夾.在&q ...
  15. 如何利用AngularJS動態創建表格和動態賦值

    AngularJS可以利用Controller控制給表格.變量賦值,控制器功能之一是提供所需要的數據.控制器可以利用ng-controller指令控制,下面利用一個實例說明動態創建和動態賦值過程,操作 ...
  16. 如何利用AngularJS事件控制複選框顯示其他頁面

    AngularJS是一個MVC JavaScript框架,它自帶了很多指定,有語句判斷.循環操作.頁面嵌入等等.下面利用一個實例說明ng-include的用法,操作如下: 工具/原料 AngularJ ...
  17. bootstrap框架怎麼在html頁面加載使用

    bootstrap框架是目前流行的開源框架,如何使得框架能夠在頁面中正常加載並使用,本文將介紹使用的步驟,和使用的兩種情況 工具/原料 文本,bootstrap框架的用於生產環境的編譯並壓縮後的 CS ...
  18. 如何利用EasyUI生成Tab並獲取其索引和標題

    EasyUI插件中一款控制項Tab,這個也是常有的控制項,Tab頁有標題.序號等屬性.可以使用自帶的方法獲取對應的索引和標題.下面利用一個實例詳細介紹如何獲取Tab頁的序號和標題(序號是從0開始),具體實 ...
  19. 利用excel加載宏獲取身份證信息

    開學了,又要輸入新生學籍,下面就教大家如何利用 excel加載宏從身份證提取身份證信息,年齡,性別,出生日期,行政區,星座),並校驗身份證號碼 工具/原料 excel 身份證信息excel加載宏(身份 ...
  20. 利用淘點金進行推廣獲取收益,獲取淘點金代碼

    淘點金是一種淘寶客推廣方式,站長只需要在網站上部署淘點金推廣代碼,就可以幫助站長將網站上的各種淘寶連結轉換成可推廣的淘寶客連結或淘寶客模塊,簡單方便的獲得更多收益,而不需要費心在網站上部署淘寶客連結. ...