AngularJS入門教程之AngularJS模型
相關(guān)閱讀:
在前面表達式和指令的教程中了解到,AngularJS模型(ng-model)可以將HTML輸入域中的值與AngularJS創(chuàng)建的變量綁定。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="name='Jone Snow'"> 名字: <input ng-model="name"> </div> </body> </html>
雙向綁定 AngularJS的雙向綁定, 是指ng-model與HTML的輸入域綁定,同時也與AngularJS的屬性綁定,所以當輸入域的值改變的時候,AngularJS的屬性值也會改變。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你輸入了: {{name}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Snow"; }); </script> <p>修改輸入框的值,標題的名字也會相應(yīng)修改。</p> </body> </html>
應(yīng)用狀態(tài) ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值
dirty 當數(shù)據(jù)被修改時狀態(tài)為TRUE,沒有被修改過為FALSE。即使修改為原來的值,也為TRUE。
valid 輸入值合法時為TRUE,不合法則為FALSE。
touched 通過觸屏點擊為TRUE,沒有點擊為FALSE。
根據(jù)狀態(tài)來應(yīng)用CSS樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <style> input.ng-invalid { background-color: lightblue; } </style> <body> <form ng-app="" name="myForm"> 輸入你的名字: <input name="myAddress" ng-model="text" required> </form> </body> </html>
input域增加了required狀態(tài),當input域沒有輸入時,ng-model為input域增加ng-invalid樣式。反之則刪除ng-invalid樣式。 ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下樣式: - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine 使用ng-model驗證郵箱格式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span> </form> </body> </html>
myForm.myAddress.$error.email屬性為TRUE(郵箱格式不正確)時,ng-show會控制span的內(nèi)容顯示出來。
以上內(nèi)容是小編給大家介紹的AngularJS入門教程之AngularJS模型,希望對大家有所幫助!
相關(guān)文章
Angular.js回顧ng-app和ng-model使用技巧
這篇文章主要回顧Angular.js中ng-app和ng-model使用技巧,感興趣的小伙伴們可以參考一下2016-04-04Angular6實現(xiàn)拖拽功能指令drag實例詳解
這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能,通過第三方控件來實現(xiàn),感興趣的朋友跟著小編一起看看具體實現(xiàn)代碼吧2015-10-10在 Angular2 中實現(xiàn)自定義校驗指令(確認密碼)的方法
這篇文章給大家探索 Angular 2 內(nèi)建的自定義驗證,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-01在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03