Angular.js回顧ng-app和ng-model使用技巧_AngularJS
來源:懂視網
責編:小采
時間:2020-11-27 21:49:30
Angular.js回顧ng-app和ng-model使用技巧_AngularJS
Angular.js回顧ng-app和ng-model使用技巧_AngularJS:Angular.js中index.html簡單結構: Your name: Hello {{yourname 'World'}}! ng-app屬性是angular.js的標志語句,它標記了angular.js的作用域。ng-app可以添加在很多地方,像上面那樣添加到html標簽上,說明angular腳
導讀Angular.js回顧ng-app和ng-model使用技巧_AngularJS:Angular.js中index.html簡單結構: Your name: Hello {{yourname 'World'}}! ng-app屬性是angular.js的標志語句,它標記了angular.js的作用域。ng-app可以添加在很多地方,像上面那樣添加到html標簽上,說明angular腳

Angular.js中index.html簡單結構:
ng-app屬性是angular.js的標志語句,它標記了angular.js的作用域。ng-app可以添加在很多地方,像上面那樣添加到html標簽上,說明angular腳本對整個頁面都起作用。也可以在局部添加ng-app屬性,比如在某一個div內添加ng-app,則表明接下來的整個div區域使用angular腳本解析,而其他位置則不適用angular腳本解析。
ng-model表示建立一個數據模型。這里在input輸入姓名的輸入框內,我們把該定義了一個yourname數據模型。定義了該模型后,我們可以在下面進行調用,方法是利用{{}}。這樣就完成了數據綁定,當我們在輸入框內輸入內容時,會同步到下面的Hello語句塊中。
ng-model定義的數據模型不僅可以用于上述場景,還能在許多情況下得到廣泛應用。
1、設置filter,實現搜索功能
在下面的代碼中,我們利用一個簡單的數據模型定義+filter就可以完成一個列表搜索功能。(這是中文網上的實例代碼,先不需要管不清楚的部分)
上述代碼中,為搜索框的input標簽綁定了數據模型query。這樣,用戶輸入的信息會被同步到query數據模型中。在下面的li中,使用filter:query就可以實現列表中的數據過濾功能,按照用戶的輸入信息進行filter過濾。
2、設置orderBy,實現列表排序功能
在下面的代碼中,與filter同理,使用orderBy為列表添加一個排序功能:
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Angular.js回顧ng-app和ng-model使用技巧_AngularJS
Angular.js回顧ng-app和ng-model使用技巧_AngularJS:Angular.js中index.html簡單結構: Your name: Hello {{yourname 'World'}}! ng-app屬性是angular.js的標志語句,它標記了angular.js的作用域。ng-app可以添加在很多地方,像上面那樣添加到html標簽上,說明angular腳