javascript 控制器中的角度滤波器（通过$ filter）

Posted 2021-05-04

// pasar a la vista los datos ya filtrados desde el controlador
// $filter('filter') : we use the filter named 'filter' (selects a subset of items in an array) with the $filter service. This works similar to vanilla js array.filter() method
// always returns an array (if no results, returns an empty array)

var myObjects = [
  { name: "Object1", shape: "circle", color: "red" },
  { name: "Object2", shape: "square", color: "orange" },
  { name: "Object3", shape: "triangle", color: "yellow" },
  ...
];
 
//get an array of just the objects matching a specific criteria:
var myRedObjects = $filter('filter')(myObjects, { color: "red" });
//match on multiple properties: 
var myRedObjects = $filter('filter')(myObjects, { shape: "circle", color: "red" });
//grab the first element for immediate use (so you can access for example $scope.showEvent.eventName):
var luckyGrab = $filter('filter')(myObjects, { color: "green" })[0];
 
//Would probably be better to see if you got a result back first:
var showEvents = $filter('filter')($scope.savedEvents, { IdEvent: $stateParams.eventId });
$scope.showEvent = showEvents && showEvents.length ? showEvents[0] : null;
 
//To do more complex logic (example: find rows with color of ‘red’ OR ‘Indigo’), 
//you can use a function as a selector:
$filter(‘filter’)(myObjects, function (o) {
  return o.color == “red” || o.color == “indigo”;
});
 
//*IMPORTANT: Be aware that if you need to filter for an exact match, i.e. on an id property, 
//then make sure you pass ‘true’ as the third argument to the filter function.

// Example
<input 
  type="text" 
  placeholder="Type to filter" 
  ng-model="username" 
  ng-change="$ctrl.updateUsers(username);">

function UserCtrl($filter) {

  var users = [{
    name: 'Todd Motto'
  },{
    name: 'Ryan Clark'
  },{
    name: 'Niels den Dekker'
  },{
    name: 'Jurgen Van de Moere'
  },{
    name: 'Jilles Soeters'
  }];

  //Our filter is only called when we activate it through the this.updateUsers function, 
  //it’s not cycled through each $digest (as filters in the view do)
  this.updateUsers = function (username) {
    this.filteredUsers = $filter('filter')(users, username);
  };

  this.filteredUsers = users;
}

// Chaining filters
// order of declaration affects the output of the filtered collection, 
// Chaining filters inside a controller are just function calls. 
// Filter your first collection, and pass the filtered collection off to another filter, 
// then assign that finalised collection to the public property:
this.updateUsers = function (username) {
  var filtered = $filter('filter')(users, username);
  filtered = $filter('orderBy')(filtered, 'name');
  this.filteredUsers = filtered;
};