J'ai déjà appris l'utilisation d'AngularJS, donc je vais simplement écrire un petit programme pour implémenter les fonctions de filtrage et de tri des requêtes.
Vous pouvez apprendre de ce programme:
1 filtre angularjs
2 Comment utiliser Ng-Repeat
3. Utilisation de contrôleurs
4 liaison de données
Analyse de programmation
Tout d'abord, si vous souhaitez d'abord interroger les filtres, vous devez utiliser le filtre filtre dans AngularJS.
Utilisez le caractère de commande du pipeline | directement après l'expression, et suivez la méthode d'écriture suivante pour réaliser un effet de filtrage:
{{Personnes | Filtre: requête}}
En utilisant le filtre pour implémenter le filtrage, la requête est la chaîne entrée lors de la requête du filtrage.
De même, la fonction de tri peut être obtenue en utilisant OrderBy:
{{Personnes | Filtre: requête | OrderBy: Order}}
La requête et le tri ci-dessus impliquent deux variables, la requête et l'ordre. Ici, vous pouvez utiliser directement Ng-Model pour implémenter la liaison des données:
Recherche: <entrée ng-model = "Query"> Trier par: <sélectionnez ng-model = "Order"> <Option Value = "Name"> Name </ Option> <Option Value = "Age"> Age </ Option> </ SELECT>
AngularJS est un langage de cadre basé sur DOM, il n'est donc pas nécessaire de mettre en œuvre des auditeurs et des déclencheurs d'événements. Lorsqu'un changement dans la zone d'entrée où se trouve la requête, la zone d'entrée et l'expression suivante seront déclenchées pour actualiser la zone d'entrée et l'expression suivante!
Par rapport à certains autres cadres, il est ajouté au DOM via le nœud DOM innerHTML basé sur les chaînes. La mise en œuvre d'AngularJS accélère l'affichage des modèles et des vues. Il réduit également l'écriture de codes tels que les auditeurs et les déclencheurs inutiles, et réellement des effets printaniers ~
La présentation des données peut être réalisée par NG-Repeat. Lorsque la page Web analyse Ng-Repeat, une balise sera clonée pour chaque élément du tableau de compilation et d'analyse.
<ul> <li ng-repeat = "Person in Persons | Filter: Query | OrderBy: Order"> {{Person.name}} {{Person.age}} </li> </ul>Le reste de l'œuvre est d'initialiser le tableau Perons dans le 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}, {"Name": "Wangwu", "Age": 30}]; $ scope.order = "age"; } </ script>Code et résultats
Enfin, tous les codes sont publiés:
<! doctype html> <html ng-app> <ead> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </angular> </ heads> </ heads> </ heads> </ heads> </ heads> </ heads> </ heads> </head <body> <div ng-controlller = "ctl"> Recherche: <entrée ng-model = "Query"> Trier par: <sélectionner ng-model = "Order"> <option value = "name"> name </ option> <option Value = "Age"> Age </ Option> </ select> <ul> <li ng-repeat = "Person in Persons | Filter: Query | commande: commande" {{personne.name}} {{personne.age}} </li> </ul> </div> <script type = "Text / JavaScript"> Fonction CTL ($ Scope) {$ Scope.Persons = [{"Name": "Xingoo", "Age": 25}, {"name": "Zhangsan", "Age": 18,,}, "Name": "Zhangsan", "Age": 18}, {"name": "Lisi", "Age": 20}, {"Name": "Wangwu", "Age": 30}]; $ scope.order = "age"; } </ script> </ body> </html>Utiliser les résultats:
Par défaut, utilisez l'âge pour trier:
En sélectionnant, vous pouvez utiliser le tri des noms
Lors de la saisie des caractères, certaines options seront automatiquement filtrées via la requête.
Ce qui précède est le tri des informations pour le filtrage et le tri AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!