He aprendido sobre el uso de AngularJS antes, por lo que simplemente escribiré un pequeño programa para implementar las funciones del filtrado y clasificación de consultas.
Puedes aprender de este programa:
1 Filtro AngularJS
2 Cómo usar Ng-Repeat
3. Uso de controladores
4 enlace de datos
Análisis de programación
Primero, si desea consultar primero los filtros, debe usar el filtro de filtro en AngularJS.
Use el carácter de comando de tubería | directamente después de la expresión, y siga el siguiente método de escritura para lograr un efecto de filtrado:
{{Personas | Filtro: consulta}}
Al usar el filtro para implementar el filtrado, la consulta es la cadena ingresada al consultar el filtrado.
Del mismo modo, la función de clasificación se puede lograr usando OrderBy:
{{Personas | Filtro: consulta | OrderBy: Order}}
La consulta y clasificación anteriores implican dos variables, consulta y orden. Aquí puede usar directamente NG-Model para implementar la unión de datos:
Buscar: <input ng-model = "QUIERY"> Sort por: <Seleccionar ng-model = "orden"> <opción valor = "nombre"> nombre </opción> <opción valor = "edad"> edad </opción> </select>
AngularJS es un lenguaje marco basado en DOM, por lo que no es necesario implementar ningún oyente y desencadenantes de eventos. Cuando cualquier cambio en el cuadro de entrada donde se encuentra la consulta, el cuadro de entrada y la siguiente expresión se activarán para actualizar el cuadro de entrada y la siguiente expresión.
En comparación con algunos otros marcos, se agrega al DOM a través del nodo DOM InnerHTML basado en cadenas. La implementación de AngularJS acelera la visualización de modelos y vistas. También reduce la redacción de códigos como oyentes innecesarios y desencadenantes, y realmente logra efectos de primavera ~
La presentación de datos se puede lograr a través de Ng-Repeat. Cuando la página web analiza a Ng-Repeat, se clonará una etiqueta para cada elemento en la matriz para la compilación y el análisis.
<ul> <li ng-repeat = "Persona en personas | Filtro: Query | Orderby: Order"> {{Person.name}} {{Person.age}} </li> </ul>El resto del trabajo es inicializar la matriz de Perones en el script:
<div ng-controller="ctl"> ... </div> <script type="text/javascript"> function ctl($scope){ $scope.persons = [ {"name":"xingoo","age":25}, {"name":"zhangsan","age":18}, {"name":"lisi","age":20}, {"nombre": "wangwu", "edad": 30}]; $ scope.order = "edad"; } </script>Código y resultados
Finalmente, todos los códigos están publicados:
<! DocType html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js" <body> <div ng-concontroller = "ctl"> Search: <input ng-model = "QUIERY"> ordenar por: <select ng-model = "orden"> <opción valor = "nombre"> name </opción> <opción valor = "edad"> edad </opción> </select> <ul> <li ng-repeat = "persona en personas | Filtro: Quera | Orderby: orden" {{Person.name}} {{Person.age}} </li> </ul> </div> <script type = "text/javascript"> function ctl ($ scope) {$ scope.persons = [{"nombre": "xingoo", "edad": 25}, {"nombre": "zhangsan", "edad": 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}, 18}. {"nombre": "lisi", "edad": 20}, {"nombre": "wangwu", "edad": 30}]; $ scope.order = "edad"; } </script> </body> </html>Use resultados:
Por defecto, use la edad para clasificar:
Al seleccionar, puede usar el nombre de nombre
Al ingresar personajes, algunas opciones se filtrarán automáticamente a través de la consulta.
Lo anterior es la clasificación de información para el filtrado y clasificación de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio web!