javascript 视图中的角度过滤器

Posted 2021-05-04

//
// Static (single) use filter
//
// Filters a single piece of Model data:
// Native filter:
<p>{{ 1400956671914 | date: 'dd-MM-yyyy' }}</p>
//
// Custom filter via .filter() method:
var app = angular.module('app', [])
.filter('makeUppercase', function () { //we make 'makeUppercase' a globally available filter in our `app` module
  return function (item) { //returned function gets invoked each time Angular calls the filter, which means two-way binding for our filters.
    return item.toUpperCase();
  };
});
// Using the filter:
<p>{{ person.username | makeUppercase }}</p>


//
//Filters for repeats
//
//
// Native filters:
<p ng-repeat="person in test.people | orderBy:'name'"> // sorts the collection by the name field. -name will reverse the order.
<p ng-repeat="person in test.people | limitTo:5"> // returns only the first 5 results. -5 will return only the last 5 results.

// Chaining filters with pipe operator: allows filters to be stacked and evaluated sequentially on the results of the previous collection filter.
<p ng-repeat="person in test.people | filter:search | orderBy:'name'  | limitTo: 5"> // filter the entire collection against the search model, order the matched results by the name attribute, and limit the result set to 5 entries.

// Custom filter 'startsWithA': only want to show names in the Array beginning with A:
<li ng-repeat="friend in $ctrl.friends | startsWithA">

app.filter('startsWithA', function () {
  return function (items) { //items is our Array passed in from the ng-repeat
    return items.filter(function (item) { //we need to return a new array
      return /a/i.test(item.name.substring(0, 1));
    });
    return filtered; 
  };



// * ... with arguments
//Filters can also be used to intelligently sort lists repeated by ng-repeat
<input type="text" ng-model="search" />
<p ng-repeat="person in test.people | filter: search"> //search all attributes by default

<input type="text" ng-model="search.name" /> //search specific attributes
<input type="text" ng-model="search.$" /> //general search across all attributes

// Custom filter example, passing arguments into the functions from other Models:
<input type="text" ng-model="letter">
<li ng-repeat="friend in $ctrl.friends | startsWithLetter:letter">

app.filter('startsWithLetter', function () {
  return function (items, letter) { //here we pass the arguments. You can pass in as many arguments as you need
    var letterMatch = new RegExp(letter, 'i');
    return items.filter(function (item) { 
      return letterMatch.test(item.name.substring(0, 1));
    });
    return filtered; 
  };
});

// Example with more arguments:
<input type="text" ng-model="letter">
<li ng-repeat="friend in person.friends | startsWithLetter:letter:number:somethingElse:anotherThing">

app.filter('startsWithLetter', function () {
  return function (items, letter, number, somethingElse, anotherThing) {
    // do a crazy loop...
  };
});


//
//Controller/$scope filter (not reusable)
//
// With this approach, filter functions are scoped and not reusable elsewhere. 
// If it makes sense then use this setup, else don’t…

<li ng-repeat="friend in person.friends | filter:person.startsWithW">

app.controller('PersonCtrl', function () {
  // here's our filter, just a simple function
  this.startsWithW = function (item) {
    // note, that inside a Controller, we don't return
    // a function as this acts as the returned function!
    return /w/i.test(item.name.substring(0, 1)); //we don't get array access, just the indivdual element
  };
  this.friends = [{
    //...
  }];
});

// Example: show only active users

this.isActive = function(user) {
    return user.User.Stats[0].active === "1";
};
<li ng-repeat="user in $ctrl.users | filter:isActive">

//Date filter (ampliar...)
{{ $ctrl.myDate | date: 'medium' }}
{{ $ctrl.myDate | date: 'MMM/yyyy' }}

//Currency filter (ampliar)
//preceding string
{{ $ctrl.myAmount | currency:'USD ' }}
//round number
{{ $ctrl.myAmount | currency:'€':0 }}
//1 decimal --- we use : to separate arguments
{{ $ctrl.myAmount | currency:'€':1 }}

//json filter: very useful for debugging
<pre> {{ $ctrl.person | json }} </pre>