Use of Filters in AngularJS and Custom Instance Code

Introduction

I believe everyone knows how to use filters: one is the use in html, and the other is the use in js code. Below, let's delve deeper into it through examples.

Example 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"> 
        <!--Multiple filters are connected with |--> 
        <!--The essence of the parameter is to add the parameter in front of the number (at the currency symbol)--> 
        {{money | currency}}<br /> 
        {{money | currency:'￥'}}<br /> 
        {{str | uppercase}}<br /> 
        {{json | json}}<br /> 
        <!-- Rounding will be performed--> 
        {{num | number:3}}<br /> 
        <!--Time only MM is in uppercase--> 
        {{currenttime | date:'yyyy-MM-dd-hh'}} 
        <!--String splitting--> 
        {{strr | limitTo:3}} 
        {{strr | limitTo:-3}} 
        <!--Sorted by person's age--> 
        <ul> 
          <li ng-repeat="person in arr | orderBy:'age':false"> 
            {{person.name}} 
          </li> 
        </ul> 
        <!--true is located at the second position, where num cannot be enclosed in quotes, the quotes above are used because name is one of its properties--> 
        <ul> 
          <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"> 
            {{n}} 
          </li> 
        </ul> 
        <!--According to the attributes of person for filtering--> 
        <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} 
      ]; 
      // If the elements of an array are equal, the memory addresses of these two elements are the same. 
      var arrnum = [12,12,33,44]; 
      if(arrnum[0]===arrnum[1]){ 
        console.log("fji") 
      }; 
      /* Using Filters in JS*/ 
      // $filter(filter name)(object, condition) 
      var val = $filter('currency')($scope.money,'￥'); 
      console.log(val); 
      var string1 = "fssdHIUHIjiojjOIJIOJ" 
      var valStr = $filter('uppercase')(string1; 
      console.log(valStr) 
    ) 
  </script> 
</html>

The running effect diagram is as follows

Summary

That's all for this article. I hope it can bring some help to your learning or work. If you have any questions, you can leave a message for communication.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, has not been edited by humans, and does not assume relevant legal liabilities. If you find any suspected copyright content, please send an email to notice#w3Please report any infringement by sending an email to codebox.com (replace # with @ when sending email), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial