집 > 기사 > 웹 프론트엔드 > AngularJs 학습 8부 필터 생성

AngularJs 학습 8부 필터 생성

高洛峰원래의: 2017-02-07 14:07:37797검색

demo

전체 샘플 데모입니다

1.filter.js 파일

angular.module("exampleApp", [])
.constant("productsUrl", "http://localhost:/products")
.controller("defaultCtrl", function ($scope, $http, productsUrl) {
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
});
});

소개합니다 서비스는 상수로 사용됩니다. 이렇게 작성하면 수정이 쉽다는 장점이 있습니다.

$http 서비스 사용 방법은 내 AngularJs(3)

<!DOCTYPE html>
<html xmlns="http://www.w.org//xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title></title>
<script src="angular.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
</head>
<body ng-controller="defaultCtrl" >
<div class="panel">
<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Name</td><td>Category</td><td>Price</td><td>expiry</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in products">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

를 사용하여 배포됨을 참조하세요. 실행 결과:

AngularJs学习第八篇过滤器filter创建

필터 사용

필터는 두 가지 범주로 구분됩니다.

1. >

2. 컬렉션을 운영합니다.

1. 데모에서 보듯이 데이터를 {{item |currency}} 등으로 포맷할 수 있어 비교적 간단합니다.

통화: "f"는 가격을 파운드로 필터링할 수 있습니다.

단일 데이터에 대한 필터 데이터 형식을 필터링하려면 필터 뒤의 해당 형식 문자에 :을 사용합니다.

숫자: 데이터의 예약된 소수점 자리를 나타냅니다.

둘: 필터링을 설정하고, 집합에서 특정 숫자를 필터링합니다.

기본 데모에 다음을 추가했습니다:

<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select>
</div>
　　filter.js中加入了：
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
$scope.limitValue = "";//要是字符串
<span style="background-color: rgb(, , );"> $scope.limitRange = [];
for (var i = ; i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
<span style="background-color: rgb(, , );"> }</span></span>
});
　<tr ng-repeat="item in products|limitTo:limitValue">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr> 　　
<span style="line-height: .; font-family: verdana, Arial, Helvetica, sans-serif; font-size: px; background-color: rgb(, , );">　</span>

작성 중인 함수는 json이 다음과 같기 때문에 성공적으로 작성되어야 합니다. 비동기적으로 데이터를 얻었습니다.

결과:

AngularJs学习第八篇过滤器filter创建

제한: 페이지에 표시되는 숫자를 조정할 수 있습니다.

필터 만들기

AngularJ에는 두 가지 유형의 필터가 있습니다. 먼저, 개별 데이터의 형식을 지정하는 필터를 만들 수 있습니다. 예를 들어 출력 문자열의 첫 글자는 다음과 같습니다. 대문자로 표시됩니다.

먼저 필터를 정의하는 방법에 대해 이야기해 보겠습니다. 필터는 module.filter를 통해 생성되며 일반적인 생성 형식은 다음과 같습니다.

angular.module("exampleApp ") //모듈을 가져오는 것을 나타냅니다. 필터는 모듈 아래에 생성됩니다.

.filter("labelCase", function () { //두 개의 매개변수를 받습니다. 첫 번째 매개변수는 필터 이름을 나타내고 두 번째 매개변수는 팩토리 함수입니다.

return function (value, reverse) { //해당 필터링 프로세스에 해당하는 작업자 함수를 반환합니다. 첫 번째 매개변수는 서식을 지정해야 하는 개체를 나타내고, 두 번째 매개변수는 어떤 형식에 따라 구성되는지 나타냅니다.

if(angular.isString(value))
{
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
}else
{
return value;
}
}
});

이것을 CustomFilter.js 파일에 작성했습니다.

<link href="bootstrap.css" rel="stylesheet" />
<script src="filter.js"></script>
<script src="customFilter.js"></script>

알겠습니다. 이제 데이터를 변경하겠습니다:

<td>{{item.name | labelCase:true}}</td>

앞서 언급했듯이 구성 정보를 추가해야 하는 경우 쓰기 형식은 필터입니다: 옵션

물론, 기본 매개변수도 작성하지 않으면 기본값은 Null 값이거나 정의되지 않음입니다. 결과:

각 데이터에 대한 필터 기능을 사용자 정의하는 것은 매우 간단합니다 >

2.limitTo

angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function(data,count)
{
if (angular.isArray(data) && angular.isNumber(count)) {
if(data.length<count || count<)
{
return data;
}else
{
return data.slice(count);
}
} else {
return data;
}
}
});

html 변경 부분:

<tr ng-repeat="item in products | skip: ">

결과: 총 6개의 데이터가 있으며, 건너뛰기 필터를 사용하여 2개를 전달했습니다.

필터를 맞춤 설정할 때 필터가 이미 정의되어 있는 것을 발견했습니다. 다시 정의하고 싶지 않습니다. 어떻게 해야 하나요?

AngularJs学习第八篇过滤器filter创建　$ filter('skip')는 함수를 반환하므로 건너뛰기 필터를 호출하므로

angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse ? value.toUpperCase() : value.toLowerCase();
return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr());
} else {
return value;
}
}
})
.filter("skip", function () {
return function (data, count) {
if (angular.isArray(data) && angular.isNumber(count)) {
if (data.length < count || count < ) {
return data;
} else {
return data.slice(count);
}
} else {
return data;
}
}
})
.filter("take", function ($filter) {//大家可以看到，我在工厂函数引用了AngularJs的内置服务。
return function (data, skipcount, takecount) {//大家看下我这里传了三个参数？
var skipdata = $filter(&#39;skip&#39;)(data, skipcount);//这种写法大家是否迷糊了呢？函数式编程。
return $filter("limitTo")(skipdata, takecount);//limitTo是内置的过滤器。
}
});

결과:

이렇게 필터가 완성되었습니다.

필터 생성에 대해 더 많은 내용을 알고 싶다면 PHP Net을 주목해주세요!

성명：

이전 기사：AngularJS 필터 필터 사용 사례 분석다음 기사：AngularJS 필터 필터 사용 사례 분석

AngularJs 학습 8부 필터 생성

관련 기사