當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
AngularJS：模型
生活随笔
收集整理的這篇文章主要介紹了
AngularJS：模型
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
| ylbtech-AngularJS：模型 |
?
| 1.返回頂部 |
AngularJS?ng-model 指令
ng-model 指令用于綁定應(yīng)用程序數(shù)據(jù)到 HTML 控制器(input, select, textarea)的值。
ng-model 指令
ng-model?指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定。
AngularJS 實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"> </div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {$scope.name = "John Doe"; }); </script>?嘗試一下 ?
雙向綁定
雙向綁定，在修改輸入域的值時(shí)， AngularJS 屬性的值也將修改：
AngularJS 實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h1>你輸入了: {{name}}</h1> </div> 嘗試一下 ?驗(yàn)證用戶輸入
AngularJS 實(shí)例
<form ng-app="" name="myForm">Email:<input type="email" name="myAddress" ng-model="text"><span ng-show="myForm.myAddress.$error.email">不是一個(gè)合法的郵箱地址</span> </form> 嘗試一下 ?以上實(shí)例中，提示信息會(huì)在?ng-show?屬性返回?true?的情況下顯示。
應(yīng)用狀態(tài)
ng-model?指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error):
AngularJS 實(shí)例
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">Email:<input type="email" name="myAddress" ng-model="myText" required></p><h1>狀態(tài)</h1>{{myForm.myAddress.$valid}}{{myForm.myAddress.$dirty}}{{myForm.myAddress.$touched}} </form> 嘗試一下 ?CSS 類
ng-model?指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類：
AngularJS 實(shí)例
<style> input.ng-invalid {background-color: lightblue; } </style> <body><form ng-app="" name="myForm">輸入你的名字:<input name="myAddress" ng-model="text" required> </form>?嘗試一下 ?
ng-model?指令根據(jù)表單域的狀態(tài)添加/移除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
| 2.返回頂部 |
| 3.返回頂部 |
| 4.返回頂部 |
| 5.返回頂部 |
| 6.返回頂部 |
| 作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。 |
轉(zhuǎn)載于:https://www.cnblogs.com/storebook/p/8543014.html
總結(jié)
以上是生活随笔為你收集整理的AngularJS：模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WinCC地图控件
- 下一篇： openstack及组件简要介绍