Estructura simple de index.html en angular.js:
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'Mundo'}}! </body> </html>La propiedad Ng-App es una declaración de bandera de Angular.js, que marca el alcance de Angular.js. NG-APP se puede agregar en muchos lugares, como se indicó anteriormente, a la etiqueta HTML, lo que indica que el script angular funciona para toda la página. También puede agregar el atributo NG-APP localmente. Por ejemplo, agregando ng-app en un determinado DIV, significa que toda el área de DIV se analizará utilizando scripts angulares, mientras que los scripts angulares no se analizarán en otros lugares.
Ng-Model significa construir un modelo de datos. Aquí, en el cuadro de entrada del nombre de entrada, definimos un modelo de datos de nombre de nombre. Después de definir el modelo, podemos hacer llamadas a continuación usando {{}}. Esto completa el enlace de datos. Cuando ingresamos contenido en el cuadro de entrada, se sincronizará con el bloque de instrucción Hello a continuación.
El modelo de datos definido por Ng-Model no solo puede usarse en los escenarios anteriores, sino que también puede usarse ampliamente en muchos casos.
1. Configure el filtro para realizar la función de búsqueda
En el siguiente código, podemos completar una función de búsqueda de lista utilizando una definición de modelo de datos simple + filtro. (Este es el código de ejemplo en el sitio web chino, por lo que no es necesario que no esté claro).
<Div> <VIV> <VIV> Search: <input ng-model = "QUIERY"> </div> <div> <ul> <li ng-depreat = "teléfono en teléfonos | filtro: consulta"> {{phone.name}} <p>En el código anterior, la consulta del modelo de datos está vinculado a la etiqueta de entrada del cuadro de búsqueda. De esta manera, la información ingresada por el usuario se sincronizará en el modelo de datos de consulta. En el siguiente LI, utilizando Filter: Consulta puede implementar la función de filtrado de datos en la lista y filtrar de acuerdo con la información de entrada del usuario.
2. Establezca OrderBy para implementar la función de clasificación de listas
En el siguiente código, como filtro, use Orderby para agregar una función de clasificación a la lista:
Búsqueda: <input ng-model = "QUIERY"> Sort by: <select ng-model = "ordenprop"> <opción valor = "name"> alfabético </ppection> <opción valor = "edad"> nuevo </option> </select> <ul> <li ng-repeat = "teléfono en teléfonos | filtro: consulta | ordenby: ordenprop"> {{{{{{{{teléfono}}} <p> {{phone.snippet}} </p> </li> </ul>Lo anterior se trata de las técnicas de usar NG-APP y Ng-Model. Revisamos lo antiguo y aprendemos lo nuevo. Espero que todos puedan ganar algo de él.