Utilisation de filtres AngularJS et exemples de code personnalisés

Préambule

Je suis sûr que tout le monde connaît l'utilisation des filtres : l'un est l'utilisation dans html, l'autre est l'utilisation dans le code JavaScript. Nous allons approfondir notre compréhension à travers des exemples.

Exemple de code

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF}}-8"> 
    <title>Filter</title> 
    <script src="day2/src/angular.js"></script> 
    <style type="text/css"> 
    </style> 
  </head> 
  <body> 
    <div ng-app="fristApp"> 
      <div ng-controller="fristController"> 
        <!--Les filtres multiples sont liés par |--> 
        <!--Le paramètre consiste à ajouter le paramètre devant le nombre (à l'endroit du symbole monétaire)--> 
        {{money | currency}}<br /> 
        {{money | currency:'￥'}}<br /> 
        {{str | uppercase}}<br /> 
        {{json | json}}<br /> 
        <!-- sera arrondi--> 
        {{num | number:3}}<br /> 
        <!--L'heure ne comporte que MM en majuscules--> 
        {{currenttime | date:'yyyy-MM-dd-hh'}} 
        <!--coupe de chaîne--> 
        {{strr | limitTo:3}} 
        {{strr | limitTo:-3}} 
        <!--classer selon l'âge de person--> 
        <ul> 
          <li ng-repeat="person in arr | orderBy:'age':false"> 
            {{person.name}} 
          </li> 
        </ul> 
        <!--true est situé à la deuxième position, où num ne peut pas être entouré de guillemets, les guillemets ci-dessus sont utilisés car name est l'un de ses attributs--> 
        <ul> 
          <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"> 
            {{n}} 
          </li> 
        </ul> 
        <!--filtre selon les attributs de person--> 
        <input type="text" ng-model="name" /> 
        <ul> 
          <li ng-repeat="person in arr | filter:{'name':name}"> 
            {{person.name}} 
          </li> 
        </ul> 
      </div> 
    </div> 
  </body> 
  <script type="text/javascript"> 
    var myApp = angular.module('fristApp',[]); 
    myApp.controller('fristController',function($scope,$filter){ 
      $scope.money = 100; 
      $scope.str = "fsHIOiiiiIU" ; 
      $scope.json = {name:"zhangsan",age:40}; 
      $scope.num = 12432432432; 
      var time = new Date(); 
      $scope.currenttime = time.getTime(); 
      $scope.strr = "fujichao"; 
      $scope.arr = [ 
        {name:'zhangsan',age:33}, 
        {name:'zhangsan2',age:30}, 
        {name:'zhangsan3',age:44}, 
        {name:'zhangsan4',age:3} 
      ]; 
      // Si les éléments d'un tableau sont égaux, les adresses mémoire de ces deux éléments sont identiques. 
      var arrnum = [12,12,33,44]; 
      if(arrnum[0]===arrnum[1]){ 
        console.log("fji") 
      }; 
      /* Utilisation des filtres dans JS*/ 
      // $filter(nom_filtre)(objet, condition) 
      var val = $filter('currency')($scope.money,'￥'); 
      console.log(val); 
      var string1 = "fssdHIUHIjiojjOIJIOJ" 
      var valStr = $filter('uppercase')(string1); 
      console.log(valStr) 
    ) 
  </script> 
</html>

L'effet visuel de l'exécution est le suivant

Résumé

C'est tout le contenu de cet article. J'espère que cela peut apporter un certain aide à votre apprentissage ou à votre travail. Si vous avez des questions, vous pouvez laisser des messages pour échanger.

Déclaration : Le contenu de cet article est issu du réseau, propriété des auteurs respectifs, le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w3Déclaration : Le contenu de cet article est issu du réseau, propriété des auteurs respectifs, le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w

Tutoriel de base