Angular puede mejorar perfectamente la funcionalidad de los elementos de forma estándar utilizando directivas, y discutiremos sus ventajas, incluidas:
Enlace de datos, creación de atributos del modelo, formulario de verificación, información de retroalimentación después del formulario de verificación, atributos de instrucción de formulario
A continuación verificamos su uso a través de casos:
1. Enlace de datos bidireccionales (NG-Model) y establecimiento de propiedades modelo
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <!-case: enlace de datos bidireccional-> <div ng-controller = "defaultctrl"> <!-Elementos de filtro cuyo completo es falso-> <h3> a hacer list <pape> {{{{{{aDOS: {Filtro: {Filtro '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 Bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional Bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional Bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional bidireccional Bidirectional Bi --> <!-- When one of the parties sends the replacement, the other also changes --> <input type="text" id="action" ng-model="newToDo.action"> </div> <div> <label for="location">Location: </label> <select id="location" ng-model="newToDo.location"> <option>Home</option> <option>Office</option> <option> mall </option> </select> </div> <!-ng-click Haga clic en Agregar para agregar el elemento-> <button ng-click = "addnewitem (newTodo)"> Agregar </botón> </div> <div> <bable> <thead> <tr> <th>#</th> <th> Action </th> <t> real ng-repeat = "item in todos"> <!-$ indexs predeterminados a 0, increment-> <td> {{$ index + 1}} </td> <td> {{item.action}} </td>> <td> <input type = "checkbox" ng-model = "item.complete"/> </td> </td> </table> </tabil </div> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> // define un módulo llamado ejemplepangangular.module ("" evalupp ", []) // define un controlador nombrado predeterminado. // Data Model $ scope.todos = [{Action: "Play Ball", Complete: False}, {Action: "Singing", Complete: False}, {Action: "Running", Complete: True}, {Action: "Dance", Complete: True}, {Action: "Swimming", Complete: False}, {Action: "Eating", Complete: False},]; $ scope.addnewitem = function (newItem) {// Determine si (angular.isdefined (newitem) && angular.isdefined (newItem.action) && angular.isdefined (newitem.location)) {$ scope.todos.push ({Action: newitem.Action + "(" + newItem.location + "),})}) }) </script> </body> </html>Primero, se definen el modelo de datos de datos. Todos y el método AddNewitem () para agregar datos al modelo. Luego, la acción y la ubicación del formulario en la vista y el alcance. Los todos en el modelo están vinculados utilizando datos de dos vías de enlace de datos Ng-Model.
Finalmente, el método AddNeWitem () para agregar datos al modelo se activa haciendo clic en el atributo.
2. Formulario de verificación
Antes de enviar el formulario al servidor, debemos verificar si los datos enviados por el usuario existe o son legales, de lo contrario, enviar datos inútiles desperdiciará recursos.
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div ID = "tdopanel" ng-confuntroller = "defaultctrl"> <!-Novalidate significa abandonar la verificación de formulario que viene con el avance y el uso de la verificación de ng ng-<! ng-submit = "addUser (newUser) Cuando los datos del formulario son legales, envíe los datos al modelo-> <form de nombre =" myForm "Novalidate ng-submit =" addUser (newUser) "> <div> <div> <label> name: </etiquetado <!-Tabla requerida es requerido-> <!-ng-model =" Newuser.name " name = "username" type = "text" requerido ng-model = "newuser.name"> </div> <div> <label> correo electrónico: </label> <input name = "usereMail" type = "correo electrónico" requerido ng-model = "newuser.email"> </div> <div> <label> <input name = "acuerdado" checkbox "ng-model =" neouser Los Términos y Condiciones </label> </div> <!-g-disable = "myform. $ invalid" El botón Enviar no está disponible cuando es ilegal completar cualquiera de los formularios-> <button type = "enviar" ng-disabled = "myForm. </div> </form> </iv> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> angular.module ("examenpppleApp", []. $ scope.adduser = function (userDetails) {$ scope.message = userDetails.name + "(" + userDetails.email + ") (" + userDetails.agreed + ")";Primero, se definen el método del modelo de datos del modelo de datos. Luego, los elementos de formulario validan, el atributo de nombre y el atributo ng-submit se agregan a la vista. Luego, el modelo de enlace de datos de dos vías Ng-Model une la acción y la ubicación del formulario en la vista y el alcance. Los todos en el modelo están obligados, y se requieren los atributos de verificación y se utilizan formularios de correo electrónico.
Luego, el botón Enviar está deshabilitado. Solo se puede usar si todos los datos de formulario son legales. Si es ilegal, se deshabilitará (ng-disable = "myform. $ Inválido")
Finalmente, los datos se envían al método addUser () del modelo se completa a través del atributo NG-SUMMIT.
3. Información de retroalimentación de verificación de formulario
Está lejos de ser suficiente para que solo verifiquemos el formulario, porque el usuario está confundido porque no sabe por qué ha sucedido el error. Por lo tanto, debemos retroceder la información al usuario para que puedan entender qué completar
Primero introduzca las clases que se verificarán en ng
El usuario de Ng-Pristine no tiene elementos interactivos agregados a esta clase
ng-dirty El usuario interactúa con elementos se agregan a esta clase
Resultado de validación NG-Válido se agregan elementos válidos a esta clase
ng-inválido El elemento no válido se agrega a esta clase
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style>/*estilo interactivo y requerido*/form.validate .ng-invalid-required.ng-dirty {fondo de fondo: naranja; } /*La interacción es estilo ilegal* / form .ng-invalid.ng-dirty {background-color: lightpink; } /*El correo electrónico es ilegal e interactúa con* / form.validate .ng-invalid-email.ng-dirty {background-color: lightGoldenRodyellow; } div.error {color: rojo; Font-Weight: Bold; } div.summary.ng-valid {color: verde; Font-Weight: Bold; } div.summary.ng-inválido {color: rojo; Font-Weight: Bold; } </style> </head> <body> <!-Case: enlace de datos bidireccionales-> <div ng-concontroller = "defaultctrl"> <!-novalidate = "novaliding" just ng form de verificación-> <!-ng-submit = "addUser (newUser)" Agregar datos al modelo-> <! Legal, ShowValidation es verdadero, lo que desencadena la clase Ng para validar-> <form de nombre = "myForm" novalidate = "Novaliding" ng-submit = "adduser (newuser)" ng-class = "showValidation? 'Validate': '' "> <div> <iv> <label> correo electrónico: </label> <input name =" correo electrónico "type =" correo electrónico "requerido =" requerido "ng-model =" newuser.email "> <!-Mensaje de inmediato de verificación-> <div> <!-Mostrar información de comentarios-> <span ng-class =" Error "ng-show =" showvalidation ">>> {{getError (myForm.email. $ Error)}} </span> </div> </div> <button type = "enviar"> ok </boton> <div> mensaje: {{mensaje}} <!-Cuando myForm. $ Validation es verdadera, showvalidation es verdadero, qué desencadenan ng-class a Ng-valid. ng-class = "myform. $ válido? 'ng-valid': 'ng-invalid' "> válido: {{myForm. $ válido}} </div> </form> </div> <script type =" text/javaScript "src =" js/angular.min.js "> </script> <script type =" text/javaScript "> // define una modulada llamada llamada a nombre ESPPLEPEPPANGULL.MODULE ("ESPEMPLEAPP", []) // Defina un controlador llamado DefaultCtrl .Controller ('DefaultCtrl', function ($ Scope) {// Agregar datos al modelo $ scope.adduser = function (userDetails) {if (myForm. $ valid) {$ scope.message = userdetails.nameils.name.s. "" + "Úsels.emailil ") (" + userDetails.AGREED + ")"; {if (error.required) {return "Por favor ingrese un valor";Primero, defina el estilo de información de retroalimentación y el estilo de verificación de forma en el estilo
Luego escriba los comentarios de la información cuando el error se escriba en JS
Finalmente ata la clase Ng en la vista
4. Propiedades de instrucción de formulario
1. Use el elemento de entrada
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "toDopanel" ng-Controller = "Defaultctrl"> <forma name = "myform" novelides = "novalidate"> <iv> <iv> <belic> text: </label> <! ng-required="requireValue" required value through data binding --> <!-- ng-minlength="3" ng-maxlength="10" maximum and minimum characters allowed --> <!-- ng-pattern="matchPattern" Regular matching --> <input name="sample" ng-model="inputValue" ng-required="requireValue" ng-minlength="3" ng-maxLength = "10" ng-pattern = "matchPattern"> </div> </div> <div> <!-requerido-> <p> error requerido: {{myform.sample. $ error.required}} </p> <!-mínimo longitud máxima-> <p> mínimo error: {{myForm.sample. $ error.minl longitud}}}}}}}}}}}}}}}} <p> Error: {{myForm.sample.$error.maxlength}}</p> <!-- Match only lowercase letters --> <p>Pattern Error: {{myForm.sample.$error.pattern}}</p> <!-- Verify that legal --> <p>Element Valid: {{myForm.sample.$valid}}</p> </div> </form></div><script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> // Define un módulo llamado EjemplEappangangular.module ("EjemplEapp", []) // Define un controlador llamado predeterminado. verdadero;2. Seleccione la lista
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "toDopanel" ng-Controller = "Defaultctrl"> <forma name = "myform" novelidate = "novalidate"> <iv> <iv> <selts> una acción: </sely </sapely. clasifica el elemento.id como elemento. Valor de opción de cambio de cambio-<!-ng-options = "item.id como item.Action Group por item.place para elemento en TODOS"-> <select ng-model = "selectValue" ng-options = "item.id como item.action group por elemento para elemento para el elemento en toDos"> <opción de opción = "" {{selectValue || "Ninguno"}} </p> </div> </orm> </div> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // define un módulo llamado EjemplAppleAppangular.module ("ExhibleApp") .Controller ('defaultctrl', function ($ scope) {// data de modelo $ scope.todos = [{{{id: 100, lugar: "escolar", acción: "play ball", completa: false}, {id: 200, lugar: "home", acción: "comer", completo: falso}, {id: 300, lugar: "Inicio", acción: "Watch TV", Complete: Near ", verdadero}; }) </script> </body> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.