AngularJS 필터 사용 예-PHP开发-php.cn

AngularJS 필터 사용 예

高洛峰

풀어 주다： 2016-12-08 10:58:46

원래의

1172명이 탐색했습니다.

이 문서의 예에서는 AngularJS 필터의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이전 섹션에서 표현식의 기능은 $scope에서 리터럴 또는 속성 값을 출력하는 것입니다. 보기에 반대합니다. 필터를 사용하여 출력 전에 출력 데이터의 형식을 지정할 수 있습니다.

다음 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html ng-app>
<head>
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial05_1</title>
</head>
<body>
 <p>{{"HELLO WORLD!"| lowercase}}</p>
 <p>{{"hello world!"| uppercase}}</p>
 <p>{{3.1415926| number:2}}</p>
 <p>{{3011| currency}}</p>
</body>
</html>

로그인 후 복사

두 개의 중첩된 중괄호는 | 문자를 전달합니다. 필터링 필터 이름을 사용하여 필터를 호출합니다. 소문자, 대문자, 숫자 및 통화는 AngularJ에 내장된 필터입니다.

소문자는 텍스트의 문자를 소문자로 변환하는 데 사용되고, 대문자는 그 반대이며, 숫자 필터는 숫자의 형식을 제어하는 데 사용되며, 통화는 숫자를 금액 형식으로 변환하는 데 사용됩니다.

브라우저에서 효과를 살펴보겠습니다.

AngularJS 필터 사용 예

AngularJs에서 제공하는 내장 필터 기능은 매우 제한적입니다. 필터.

<!DOCTYPE html>
<html ng-app="filterMod">
<head>
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial05_2</title>
</head>
<body>
 <p>{{11314| toRMB}}</p>
<script>
 var filterMod = angular.module("filterMod",[]);
 filterMod.filter("toRMB",function($log)
 {
  var toRMB = function(input)
  {
   var RMBNum = [&#39;零&#39;,"壹","贰","叁","肆","伍","陆","柒","捌","玖","拾","佰","仟","万","亿"];
   var inputStr = input + "";
   var inputArr = new Array();
   for(i=0;i<inputStr.length;i++)
   {
    var temp = parseInt(input % 10);
    inputArr.push(temp);
    switch(i)
    {
     case 0:inputArr.push(10);
      break;
     case 1:inputArr.push(11);
      break;
     case 2:inputArr.push(12);
      break;
     case 3:inputArr.push(13);
      break;
    }
    input = input / 10;
   }
   inputArr = inputArr.reverse();
   var output = "";
   for(i=0;i<inputArr.length;i++)
   {
    output += RMBNum[inputArr[i]];
   }
   return output;
  }
  return toRMB;
 });
</script>
</body>
</html>

로그인 후 복사

위는 숫자를 RMB용 대문자로 변환하기 위해 작성자가 맞춤 설정한 필터입니다.

filterMod.filter("toRMB",function($log)...

로그인 후 복사

필터의 정의는 컨트롤러와 유사하며 AngularJs 모듈의 필터 메서드를 통해 완성됩니다. 두 번째 매개변수는 데이터 처리 함수를 반환해야 하는 필터 구현 부분입니다.

var toRMB = function(input)...

로그인 후 복사

이 부분은 데이터 처리 함수이고, input은 원래 입력 데이터이고, 이 함수에서 입력 데이터를 처리한 후 처리된 데이터를 반환합니다. 그냥 데이터.

브라우저의 효과:

AngularJS 필터 사용 예

참고: 이 toRMB 필터는 필터 사용자 정의 방법을 보여주기 위해 작성자가 작성한 것입니다. 관심 있는 독자들은 스스로 부족한 부분을 개선할 수 있습니다.