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에 대한 신고는 이메일을 보내시고 #을 @으로 변경하시기 바랍니다. 관련 증거를 제공하시면, 사실관계가 확인되면 즉시 위반 내용이 삭제됩니다.

기본 튜토리얼

아마도 좋아할 것