Anglejs 필터 구문 분석 예

이 회사는 이제 웹앱용 anglejs를 기반으로 일부 API를 캡슐화하는 ionic을 사용하고 있습니다. 최근 사용된 anglejs 필터를 통해 실제로 많은 코드가 절약되었습니다.

ng는 상대적으로 쓸모가 없는 필터인데, 여기서는 간단히 언급해보자! 치킨 수프에 일반적으로 사용되는 필터의 예는 다음과 같습니다.

소문자(소문자)

{{ 성 | 소문자 }}

대문자(대문자)

{{ 성 | 대문자 }}

숫자(형식화된 숫자)

숫자 필터는 123,456,789와 같이 숫자에 천 단위 나누기를 추가할 수 있습니다. 동시에, 작은 부동 소수점 이하 자릿수를 지정할 수 있는 매개변수를 받습니다:

{{ num | number : 2 }}

currency(통화 처리)

{{num | 통화 : '\'}}

json(형식화된 json 객체)

{{ jsonTest | json}}

친숙한 JSON.stringify( )는

limitTo(배열 길이 또는 문자열 길이 제한)

{{ childrenArray |limitTo : 3 }} //배열의 처음 3개 항목과 동일합니다. 표시됩니다

필터(일치하는 하위 문자열)

는 배열을 처리한 다음 특정 하위 문자열이 포함된 요소를 필터링하여 하위 배열로 반환하는 데 사용됩니다. 문자열 배열이거나 객체 배열일 수 있습니다. 객체의 배열인 경우 속성 값이 일치할 수 있습니다. 하위 문자열에 대한 일치 규칙을 정의하는 매개변수를 받습니다.

html

<ul>
 <li>filter 匹配子串(以下写法只是方便观察)</li>
 <li>{{ webArr | filter : &#39;n&#39; }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : &#39;l&#39;} }} <!--//参数是对象，匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数，指定返回age>25的--></li>
</ul>

js

$scope.webArr = [
   {name:'nick',age:25},
   {name:'ljy',age:28},
   {name:'xzl',age:28},
   {name:'zyh',age:30}
  ];
$scope.fun = function(e){return e.age>25;};

효과 표시:

필터 일치 하위 문자열(다음 쓰기는 관찰의 편리함) )

[{"name":"nick","age":25}]
[{"name":"nick","age":25}]
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

날짜 유형

날짜 필터는 일반적으로 사용되는 필터 중 가장 간단해야 합니다!

yyyy--연도를 나타냅니다.

MM--월(대문자로 표기해야 함)

dd-날짜; ;

mm--분(소문자여야 함)

ss--초

EEEE--주

hh:mm-- 형식은 24시간 형식입니다.

h:mma--12시간 형식

여기서 연도, 월, 일, 시, 분, 초 또는 /: - 기다려서 일치시키세요. 스스로!

<ul>
 <li>8 日期1</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss EEEE&#39;"></li>
 <li>8 日期2</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 h:mma EEEE&#39;"></li>
 <li>8 日期3</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 hh时mm分ss秒&#39;"></li>
 <li>8 日期4</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss&#39;"></li>
 </ul>

날짜 1의 표시 효과:

2016/11/19 11:59:05 Saturday

날짜의 표시 효과 날짜 2 :

2016년 11월 19일 오후 12시 01분 토요일

날짜 3의 표시 효과:

2016년 11월 22일 10:42:09

날짜 4 표시 효과:

2016/11/22 11:16:58

orderBy 정렬(개인적으로는 일곱 번째 예가 가장 좋은 작성 방법이라고 생각함)

ng -repeat는 독립적인 범위를 생성하고 ng-repeat 루프 바로 뒤에 파이프라인 orderBy를 추가합니다.

사용법은 매우 간단하지만 주의해야 할 두 가지 함정이 있습니다.

매개변수 따옴표를 잊지 마세요.

매개변수 형식 - age를 작성하세요. item2.age를 직접 작성할 필요가 없습니다.

3 연령별 정렬(기본 오름차순)

<ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

효과 표시:

按年龄排序(默认升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165

4 연령별 정렬(역순 또는 내림차순으로 매개변수 true 추가)

<ul>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

효과표시:

按年龄排序(加参数true则为倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

5 먼저 나이순으로 오름차순으로 정렬하고 키순으로 내림차순으로 정렬하고 싶습니다. (모두 내림차순으로, 효과가 나타나지 않음) , 예 7 참조)

한 번은 순진하게 이렇게 썼습니다^*^

<ul>
 <!--<li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;-stature&#39;">-->
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;stature&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

효과 표시:

想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

6 먼저 나이순으로 정렬한 다음 키순으로 정렬합니다. (추가 매개변수는 배열 형식으로 작성됩니다.)

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

효과 표시:

先按年龄在按身高排序(多个参数写出数组形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165

7 먼저 나이순으로 오름차순으로, 그 다음 키별로 내림차순으로 정렬합니다( 여러 매개변수가 배열 형식으로 작성됨)

매개변수 앞에 음수 기호를 추가하면 역순이 달성됩니다.

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;-stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

효과 표시:

!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165

개인적으로 많은 매개변수가 ng에 내장된 필터는 전혀 쓸모가 없습니다. 개별 요구에 맞게 필터를 사용자 정의하세요.

맞춤 필터

맞춤 필터는 함수만 반환하고, 함수는 원하는 값을 반환해줍니다!

예:

angular.module('youAppName',[])
  .filter('youFilterName',function(){
   return function(){
   //你的处理代码
   return result;//返回你要的值
   }
  })

합계 필터 사용자 정의

html

<ul>
<li>!!1 求和</li>
<li ng-repeat="item1 in items1">
 <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
</li>
</ul>

사용:

파이프라인 앞과 뒤의 모든 매개변수는

js

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
  //求和
  .filter('sumNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })

인수--함수에서 허용하는 매개변수 집합, 클래스 배열

Array.prototype.slice.call(arguments)

이 문장은 유사 배열을 배열로 변환합니다.

sum+=arr[i]?arr[i]:0;

합계는 각각의 누적합과 같습니다. 배열의 요소입니다. 백그라운드에서 값을 전달하지 말고 보조 매개변수를 사용자 정의 파일러 함수에 매개변수로 전달하는 것을 피하세요. 내결함성인 경우 안전을 위해 0을 쓰세요.

백분율을 찾기 위한 필터 사용자 정의(소수점 두 자리로 백분율 찾기)

html

<ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>

사용법:

분자는 합계로 작성됩니다. 파이프라인 앞의 모든 매개변수 중 파이프라인 뒤와 파이프라인 앞의 매개변수가 분모입니다.

js

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
//百分比
  .filter('percentNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?&#39;0%&#39;:Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })

다음은 위 합계에 대한 필터에 대한 추가 문장입니다. 🎜>

sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"

수학 내장 함수인 Math .round는 정수를 유지하기 위해 반올림합니다.

합계에 10000을 곱하고 100으로 나누어 백분율 기호를 연결합니다. 즉, 소수점 이하 두 자리를 유지합니다.

전체 코드:

 
 


 

 
!!1 求和
 

  

 
 
 <ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>
 <ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 

 
4 按年龄排序(加参数true则为倒序即降序)
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
5 想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
 
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
6 先按年龄在按身高排序(多个参数写出数组形式)
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
8 日期1
 

 
2016/11/19 11:59:05 Saturday
 
8 日期2
 

 
2016年11月19日 12:01PM Saturday
 
8 日期3
 

 
2016年11月22日 10时42分09秒
 
8 日期4
 

 
2016/11/22 11:16:58
 
 
{{100000|currency:'￥'}}
 

 
filter 匹配子串(以下写法只是方便观察)
 
{{ webArr | filter : 'n' }} 
 
{{ webArr | filter : 25 }} 
 
{{ webArr | filter : {name : 'l'} }} 
 
{{ webArr | filter : fun }} 
 
 
 <script>
 var nickAppModule=angular.module(&#39;nickApp&#39;,[]);
 nickAppModule
  //求和
  .filter(&#39;sumNick&#39;,function(){//管道前后所有参数和
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })
  //百分比
  .filter(&#39;percentNick&#39;,function(){//小数点后两位百分比 分子写在管道前面，管道后面的所有参数和加管道前的参数和为分母
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?&#39;0%&#39;:Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })
 </script>
<script>
 nickAppModule
  .controller(&#39;nickCtrl&#39;,[&#39;$scope&#39;,function($scope){
  $scope.items1=[{
   male:66,
   female:23,
   gay:5,
   other:&#39;xxx&#39;,
   msg:&#39;xxx&#39;
  },
   {
   male:16,
   female:8,
   gay:7,
   other:&#39;xxx&#39;,
   msg:&#39;xxx&#39;
   }];
  $scope.items2=[
   {
   name:&#39;ljy&#39;,
   age:27,
   stature:165
   },
   {
   name:&#39;nick&#39;,
   age:25,
   stature:170
   },
   {
   name:&#39;xzl&#39;,
   age:27,
   stature:175
   },
   {
   name:&#39;zyh&#39;,
   age:29,
   stature:165
   }];
  $scope.date=new Date();
  $scope.webArr = [
   {name:&#39;nick&#39;,age:25},
   {name:&#39;ljy&#39;,age:28},
   {name:&#39;xzl&#39;,age:28},
   {name:&#39;zyh&#39;,age:30}
  ];
  $scope.fun = function(e){return e.age>25;};
  }])
</script>

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이라도 도움이 되었으면 좋겠습니다. PHP 중국어 웹사이트!

Angularjs 필터 관련 기사 분석의 더 많은 예를 보려면 PHP 중국어 웹사이트를 주목하세요!