Angularjs Learn the Eighth filters filter to create

Angularjs Learn the Eighth filters filter to create _angularjs

Last Update:2017-01-19 Source: Internet

Author: User

Tags types of filters

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Demo

This is the entire example demo

1, filter.js documents

Angular.module ("Exampleapp", [])
. Constant ("Productsurl", "http://localhost:/products")
. Controller (" Defaultctrl ", Function ($scope, $http, Productsurl) {
$http. Get (Productsurl). Success (function (data) {
$ Scope.products = data;//directly into the array
});

Here I put the introduced service as a constant, the advantage of this writing is that I am easy to modify.

For how to use the $http service, please refer to my ANGULARJS (c) deployed use

<!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>

The results of the run:

Use filter

Filters fall into two categories:

1, the single data filtering

2, the collection to operate.

first, the use of data to operate relatively simple , as shown on the demo, in {{item | currency}}, and so on, you can format.

Currency: "F" can be a price filtered into sterling.

A single data filter wants to filter the data format after the filter is used: in the corresponding format character.

Number: Indicates the data decimal bit reservation,

Second: Set filter , filter out a certain amount from the set.

In the basic demo I joined this:

<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 includes:
$http.get(productsUrl).success(function (data) {
$scope. Products = data; / / directly converted to array
$scope. Limitvalue = "; / / if string
<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>

The Write function must be written in success because it takes the JSON data asynchronously.

Results:

Limit: You can adjust the number of pages displayed on the page.

Create Filter

ANGULARJS has two types of filters, first we can create a filter that formats a single data, such as the first letter of the output string.

First, how to define a filter: The filter is created by Module.filter, and the general format created is:

Angular.module ("Exampleapp")//Represents getting a module. The filter is created under the module.

. Filter ("Labelcase", function () {//Receive two parameters, the first parameter represents the name of the filter, and the second is a factory function

return function (value, reverse) {//Returns a worker function to the appropriate filter handling. The first parameter represents the object that needs to be formatted, and the second parameter represents the configuration, in what format.

if (angular.isstring (value))
{
var intermediate = reverse? Value.touppercase (): Value.tolowercase ();
Return (reverse intermediate[].tolowercase (): intermediate[].touppercase () + INTERMEDIATE.SUBSTR ());
} else
{return
value;
}
}

This is another JS file I wrote to. Customfilter.js don't forget to add.

<link href= "Bootstrap.css" rel= "stylesheet"/> <script src=
"Filter.js" ></script>

Okay, now I'm going to change the following data:

I told you before. If you need to add configuration information, the writing format is a filter: option

Of course the default parameter can also not write, will default to null value or undefined.

Results:

Customizing a filter function for each data processing is as simple as that.

2, custom set processing functions, just like 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);}} or
else {return
data;
}
}

Part of the HTML change:

Result: Total is six data, have used skip filter to give out 2.

When we customize the filter, I find that there is a filter already defined, I do not want to repeat the definition, what to do, we can also use a created filter to create.

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
D Ata.slice (count);
}
} else {return
data;
}}}
. Filter ("Take", function ($filter) {//Everyone can see that I referenced the ANGULARJS built-in service in the factory function. return
function (data, Skipcount, Takecount) {//You see, I've got three parameters here?
var skipdata = $filter (' Skip ') (data, skipcount); Are you confused? Functional programming. return
$filter ("LimitTo") (Skipdata, takecount);//limitto is a built-in filter.
}

$filter (' Skip ') calls the skip filter, because he returns a function, so we can continue to pass the argument.

Results:

This is how the filter is done. is not very simple.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More