Angular는 지침을 사용하여 표준 형태 요소의 기능을 원활하게 향상시킬 수 있으며 다음을 포함하여 다음을 포함한 장점에 대해 논의 할 것입니다.
데이터 바인딩, 모델 속성 생성, 검증 양식, 확인 후 피드백 정보, 양식 명령 속성
아래에서는 사례를 통해 사용법을 확인합니다.
1. 양방향 데이터 바인딩 (NG- 모델) 및 모델 속성 설정
<! docType> <!-사용 모듈-> <html ng-app = "emabeseapp"> <head> <title> angular directive </title> <meta charset = "utf-8"/> <link rel = "stylesheet"type = "text/css"href = "css/bootstrap.min.css"> type = "text/css"href = "css/bootstrap-theme.min.css"> </head> <body> <!-사례 : 양방향 데이터 바인딩-> <div ng-controller = "defaultCtrl"> <!-falling <h3> list <span> {filter | (todos | filter | 'false'}).length}}</span></h3> <div> <div> <div> <label for="action">Action: </label> <!-- ng-model Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional 양방향 bi-> <!-당사자 중 하나가 교체품을 보낼 때 다른 하나는 변경-> <입력 유형 = "text"id = "action"ng-model = "newtodo.action"> </div> <div> <레이블에 대한 "위치"> 위치 : </label> <select ""location "ng-model ="newtodo.loction "> home 옵션> <pluxt> mall </옵션> </select> </div> <!-ng- 클릭 클릭 추가 클릭 추가-> <button ng-click = "addnewitem (newtodo)" "> add </button> </div> <div> <table> <Thead> <t> <t>#</th> <Th> action <THID> </th> </th> ng-repeat = "todos"> <!-$ index defaults to 0, 증분-> <td> {{$ index + 1}} </td> <td> {{item.action}} <td> <td> <input type = "checkbox"ng-model = "initem.complete"/> </td> </td> </td> </td> </div> </div> <script type = "text/javaScript"src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // 이름이 지정된 모듈을 정의합니다. ($ scope) {// data model $ scope.todos = [{action : "play ball", complete : false}, {action : "singing", complete : complete}, {action : "running : true}, {action :"action : "수영", action}, {leat wonge " $ scope.addnewitem = function (newitem) {// 결정 (Angular.isdefined (newitem) && angular.isdefined (newitem.istular.isdefined (newitem.location))) {$ scope.todos.push ({action : newitem.action + ") (" + kitem.locat + ")) }) </script> </body> </html>먼저, 데이터 모델 scope.todos 및 addnewitem () 메소드가 모델에 데이터를 추가 할 수있는 메소드가 정의됩니다. 그런 다음,보기 및 범위에서 형태의 동작 및 위치는 모델의 토도가 양방향 데이터 결합 NG- 모델을 사용하여 바인딩됩니다.
마지막으로, 모델에 데이터를 추가하는 addnewitem () 메소드는 속성을 클릭하여 트리거됩니다.
2. 검증 양식
양식을 서버에 제출하기 전에 사용자가 제출 한 데이터가 존재하는지 또는 합법적인지 확인해야합니다. 그렇지 않으면 쓸모없는 데이터를 제출하면 리소스가 낭비됩니다.
<! docType> <!-사용 모듈-> <html ng-app = "emabeseapp"> <head> <title> angular directive </title> <meta charset = "utf-8"/> <link rel = "stylesheet"type = "text/css"href = "css/bootstrap.min.css"> type = "text/css"href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "todopanel"ng-controller = "defaultctrl"> <! <! <! <! ng-submit = "adduser (newuser) 양식 데이터가 합법적 일 때 데이터를 모델에 제출합니다-> <form name ="myform "novalidate ng-submit ="adduser (newuser) ""> <div> <lave> <label> 이름 : </label> <!-필수 테이블이 양식이 필요합니다. 이름 = "username"type = "text"필수 ng-model = "newUser.name"> </div> <div> <label> 이메일 : </label> <input name = "useremail"type = "email"필수 ng-model = "newuser.email"> </div> <div> <label> <입력 이름 = "type ="newser "revingbly 이용 약관 </label> </div> <!-g-disabled = "myform. $ invalid"양식을 채우는 것이 불법 일 때 제출 버튼을 사용할 수 없습니다-> <button type = "ng-disabled ="myform. $ invalid "> ok </button> </div> 메시지 : {{message}} <{myform : {{{myform : {{myfort. </div> </form> </div> <script type = "text/javaScript"src = "js/angular.min.js"> </script> <script type = "text/javaScript"> angular.Module ( "ExampleApp"), []) $ scope.adduser = function (userDetails) {$ scope.message = userDetails.name + "(" + userDetails.email + ") (" + userDetails.Agreed + ")";먼저 데이터 모델 SCOPE.MESSAGE 및 ADDUSER () 메소드가 모델에 데이터를 추가 할 수있는 메소드가 정의됩니다. 그런 다음 Form Elements가 Validate, Name Attribute 및 NG-Submit 속성이보기에 추가됩니다. 그런 다음 양방향 데이터 바인딩 NG- 모델은보기 및 범위에서 양식의 동작 및 위치를 바인딩합니다. 모델의 토도는 바인딩되며 검증 속성이 필요하며 이메일 양식이 사용됩니다.
그런 다음 제출 버튼이 비활성화됩니다. 모든 양식 데이터가 합법적 인 경우에만 사용할 수 있습니다. 불법이라면 비활성화됩니다 (ng-disabled =”myform. $ invalid”).
마지막으로 데이터는 모델의 AddUser () 메소드에 제출됩니다. NG-Submit 속성을 통해 완료됩니다.
3. 확인 피드백 정보를 양식
사용자가 오류가 발생한 이유를 모르기 때문에 혼란스러워서 양식을 확인하는 것만으로도 충분하지 않습니다. 따라서 우리는 사용자에게 정보를 피드백하여 무엇을 작성 해야하는지 이해할 수 있어야합니다.
먼저 Ng에서 확인할 클래스를 소개합니다
NG-Cristine 사용자는이 클래스에 추가 된 대화식 요소가 없습니다.
NG-DIRTY 사용자가 요소와 상호 작용하는 것은이 클래스에 추가됩니다.
ng-valid 검증 결과 유효 요소 가이 클래스에 추가됩니다.
ng-invalid 유효하지 않은 요소 가이 클래스에 추가됩니다
<! docType> <!-사용 모듈-> <html ng-app = "emabeseapp"> <head> <title> angular directive </title> <meta charset = "utf-8"/> <link rel = "stylesheet"type = "text/css"href = "css/bootstrap.min.css"> type = "text/css"href = "css/bootstrap-theme.min.css"> <style>/*대화식 및 필수 스타일*/form.validate .ng-Invalid-required.ng-dirty {background-color : Orange; } /*상호 작용은 불법 스타일* / form .ng-invalid.ng-dirty {background-color : lightpink; } /*이메일은 불법이며* / form.validate .ng-invalid-email.ng-dirty {background-color : lightgoldenrodyellow; } div.error {색상 : 빨간색; 글꼴 중량 : 대담한; } div.summary.ng-valid {색상 : 녹색; 글꼴 중량 : 대담한; } div.summary.ng-invalid {색상 : 빨간색; 글꼴 중량 : 대담한; }. 검증은 합법적이며 Showvalidation은 사실입니다. NG 클래스가 검증하기 위해 NG 클래스를 트리거합니다.> <form name = "myform"novalidate = "novalidate"ng-submit = "adduser (newuser)"ng-class = "showvalidation? 'Validate': '' "> <div> <div> <label> 이메일 : </label> <input name ="email "="email "="email = "require" "필수"ng-model = "newuser.email"> <!-검증 프롬프트 메시지-> <div> <!-피드백 정보 표시-> <span ng class = "error"ng-show = "showvalidation"> {getError (myform.email. $ error)}} </span> </div> </div> <button type = "제출"> ok </button> <div> 메시지 : {{message}} <!-myform ng-class = "myform. $ 유효? 'ng-valid': 'ng-invalid' ""> valid : {{myform. $ valid}} </div> </form> </div> <script type = "text/javaScript"src = "js/angular.min.js"> </script> <script> <script> <text/javascript "> // MONTULE A PREFINE emabeseAppangular.module ( "emabeseapp", []) // defaultCtrl .controller ( 'defaultCtrl', function ($ scope) {// 모델 $ scope.adduser = function (userDetails) {if (myform. $ valid) {userdetails.message = userdetails.message = userdetails.message에 데이터 추가라는 컨트롤러를 정의합니다. + ") (" + userDetails.Agreed + ")} else {$ scope.showvalidation = true; (angular.isdefined (error.required) {retud} else (error.email) {return "유효한 이메일 주소를 입력하십시오}}) </script> </body </html>먼저, 피드백 스타일의 스타일과 스타일의 양식 검증 스타일을 정의하십시오.
그런 다음 오류가 JS로 작성되면 정보 피드백을 작성하십시오.
마지막으로보기에 ng 클래스를 바인딩합니다
4. 지시 속성을 양식
1. 입력 요소를 사용하십시오
<! docType> <!-사용 모듈-> <html ng-app = "emabeseapp"> <head> <title> angular directive </title> <meta charset = "utf-8"/> <link rel = "stylesheet"type = "text/css"href = "css/bootstrap.min.css"> type = "text/css"href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "todopanel"ng-controller = "defaultctrl"> <form name = "myform"novalidate = "novalidate"> <! ng-required = "required value"데이터 바인딩을 통한 값-> <!-ng-minlength = "3"ng-maxlength = "10"최대 및 최소 문자 허용-> <!-ng-pattern = "matchpattern"일반 일치-> <input name = "sample"ng-model = "Inputvalue"ng-required = "ng-required ="ng-required ng-maxlength = "10"ng-pattern = "matchpattern"> </div> </div> <div> <!-필수-> <p> 필수 오류 : {{myform.sample. $ error.required}} </p> <!-최소 최대 길이-> <p> 최소 오류 : {myform.sampl.Minlenger. error : {{myform.sample. $ error.maxlength}}} </p> <!-소문자 만 일치합니다-> <p> 패턴 오류 : {{myform.sample. $ error.pattern}} <!-법적-> <p> 요소 유효한 : {myform.sampl. $ valid} </p> </div> </p> </sport. 유형 = "text/javaScript"src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // emavePleApPangular.Module이라는 이름의 모듈 정의 ( "ExamPLeApp", []) // defaultCtrl .controller ( 'defaultCtrl'), function ( 'defaultCtrl'). $ scope.requirevalue = true.matchpattern = 새로운 regexp ( "^[az]");2. 목록을 선택하십시오
<! docType> <!-사용 모듈-> <html ng-app = "emabeseapp"> <head> <title> angular directive </title> <meta charset = "utf-8"/> <link rel = "stylesheet"type = "text/css"href = "css/bootstrap.min.css"> type = "text/css"href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "todopanel"ng-controller = "defaultctrl"> <form name = "myform"novalidate = "novalidate"> <div> <라벨> 정렬 item.id as item 옵션 옵션 옵션 옵션 값 값-> <!-ng-options = "item.id as as at at at at at at at at at at at at at item. {{selectValue || "none"}} </p> </div> </form> </div> </div> <script type = "text/javaScript"src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // 이름이 명명 된 모듈 명명 된 모듈 명명서 DEFARTING CTRAING ( "exampleApp"). .controller ( 'defaultCtrl', function ($ scope) {// 모델 데이터 $ scope.todos = [{id : 100, place : "school", "school", "play ball", complete : false}, {id : 200, place : "home", "have", false}, {id : 300, "홈 :"조치 ","홈 ","홈 "; }) </script> </body> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.