استخدام مرشحات AngularJS وتعريف الكود المخصص

مقدمة

نتأكد جميعًا من استخدام المُرشحات: نوع واحد هو استخدامها في html، والنوع الآخر هو استخدامها في كود js، سنعمل الآن من خلال مثال لفهمها بشكل أعمق.

مثال على الكود

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>过滤器</title> 
    <script src="day2/src/angular.js"></script> 
    <style type="text/css"> 
    </style> 
  </head> 
  <body> 
    <div ng-app="fristApp"> 
      <div ng-controller="fristController"> 
        <!--多个过滤器之间用 | 连接--> 
        <!--参数的实质就是把参数添加在数字前面（在货币符号处使用）--> 
        {{money | currency}}<br /> 
        {{money | currency:'￥'}}<br /> 
        {{str | uppercase}}<br /> 
        {{json | json}}<br /> 
        <!-- 会进行四舍五入--> 
        {{num | number:3}}<br /> 
        <!--时间 只有MM是大写--> 
        {{currenttime | date:'yyyy-MM-dd-hh'}} 
        <!--字符串的切割--> 
        {{strr | limitTo:3}} 
        {{strr | limitTo:-3}} 
        <!--按照person的age进行排序--> 
        <ul> 
          <li ng-repeat="person in arr | orderBy:'age':false"> 
            {{person.name}} 
          </li> 
        </ul> 
        <!--true 位于第二个位置，其中num是不能加“”的，上面的加“”是因为name是他的一个属性--> 
        <ul> 
          <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"> 
            {{n}} 
          </li> 
        </ul> 
        <!--根据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} 
      ]; 
      // إذا كانت عناصر المجموعة متطابقة، فإن عنوانا العناصر هو نفسه. 
      var arrnum = [12,12,33,44]; 
      if(arrnum[0]===arrnum[1]){ 
        console.log("fji") 
      }; 
      /* استخدام مفلتر في JS */ 
      // $filter(اسم المفلتر)(الشكل، الشروط) 
      var val = $filter('currency')($scope.money,'￥'); 
      console.log(val); 
      var string1 = "fssdHIUHIjiojjOIJIOJ" 
      var valStr = $filter('uppercase')(string1); 
      console.log(valStr) 
    } 
  </script> 
</html>

شكل التشغيل كما يلي

الخاتمة

هذا هو محتوى المقال الكامل، آمل أن يساعدكم هذا في تعلم أو عملكم، إذا كان لديكم أي أسئلة، يمكنكم ترك تعليقات للتفاعل.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق الطبع والتأليف تخص المالك الأصلي، المحتويات تم إضافتها من قبل مستخدمي الإنترنت بشكل تلقائي، ويتمتع هذا الموقع بعدم امتلاك حقوق الملكية، ولم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية متعلقة بذلك. إذا رأيت محتوى يشتبه في حقوق الطبع والتأليف، فأنت مرحب بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدم الدليل على الدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم عن حقوق الطبع والتأليف على الفور.

تعليمية الأساس

سيحبك