Angularjs ng- 모델 지침
NG- 모델 지침은 응용 프로그램 데이터를 HTML 컨트롤러 (입력, Select, TextArea)의 값에 바인딩하는 데 사용됩니다.
ng- 모델 명령
NG- 모델 지침은 입력 필드의 값을 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"> name : <입력 ng-model = "name"> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.name = "John doe"; 컨트롤러 속성에 대한 입력 도메인. </p> </body> </html>실행 결과 :
이름:NG- 모델 지침을 사용하여 입력 필드의 값을 컨트롤러 속성에 바인딩하십시오.
양방향 바인딩
양방향 결합은 입력 필드의 값을 수정할 때 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"> name : <input ng-model = "name"> <h1> 당신이 입력했습니다 : {{name}} </h1> </div> <cript> var app = angular.module ( 'myApp', []); app.controller ( 'myctrl', function ($ scope.name) {$ scope.name) {$ scope. doe ";}); </script> <p> 입력 상자의 값을 수정하면 제목 이름도 그에 따라 수정됩니다. </p> </body> </html>실행 결과 :
이름:
당신은 입력 : John Doe
입력 상자의 값을 수정하면 제목 이름도 그에 따라 수정됩니다.
사용자 입력을 확인하십시오
AngularJS 인스턴스
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <comm ng-app = "" "embore" " type = "email"name = "myAddress"ng-model = "text"> <span ng-show = "myform.myAddress. $ error.email"> 합법적 인 이메일 주소가 아님 </span> </form> <p> 입력 상자에 이메일 주소를 입력하십시오. 합법적 인 이메일 주소가 아닌 경우 즉각적인 메시지가 나타납니다. </p> </body> </html>
실행 결과 :
이메일:
입력 상자에 이메일 주소를 입력하십시오. 합법적 인 이메일 주소가 아닌 경우 즉각적인 메시지가 나타납니다.
CSS 클래스
NG- 모델 지침은 해당 상태에 따라 HTML 요소에 대한 CSS 클래스를 제공합니다.
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> </script> </script> input.ng--invalid {backgrount-invalid : LightBlue;} </style> </head> <body> <form ng-app = ""name = "myform"> 이름을 입력하십시오 : <input name = "myname"ng-model = "mytext"필수> </form> <p> 텍스트 필드 편집 및 다른 상태의 배경 색상이 변경됩니다. </p> <p> 필요한 속성은 텍스트 필드에 추가되며, 필요한 경우 불법입니다. </p> </body> </html>실행 결과 :
텍스트 필드를 편집하면 다른 상태의 배경색이 변경됩니다.
텍스트 필드에는 필요한 속성이 추가되었으며 필요한 경우 불법입니다.
NG 모델 지침은 양식 필드의 상태에 따라 다음 클래스를 추가/제거합니다.
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
NG 보완
NG-Cristine