AngularJS
filters

Je eerste filter

Filters zijn een speciaal type functie die kan wijzigen hoe iets op de pagina wordt afgedrukt, of kan worden gebruikt om een array te filteren, of een ng-repeat actie. U kunt een filter maken door de methode app.filter() aan te roepen en deze een naam en een functie door te geven. Zie de onderstaande voorbeelden voor meer informatie over de syntaxis.

Laten we bijvoorbeeld een filter maken dat een tekenreeks verandert in hoofdletters (in wezen een wrapper van de JavaScript-functie .toUpperCase() ):

var app = angular.module("MyApp", []);

// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
    // all the filter does is return a function,
    // which acts as the "filtering" function
    return function(rawString){
        // The filter function takes in the value,
        // which we modify in some way, then return
        // back.
        return rawString.toUpperCase();
    };
}); 

Laten we eens nader kijken naar wat er hierboven gebeurt.

Eerst maken we een filter met de naam "hoofdletters", dat net als een controller is; app.filter(...) . Vervolgens retourneert de functie van dat filter de daadwerkelijke filterfunctie. Die functie neemt een enkel object, dat het te filteren object is, en zou de gefilterde versie van het object moeten retourneren.

Opmerking: in deze situatie gaan we ervan uit dat het object dat in het filter wordt doorgegeven een tekenreeks is en we weten daarom dat het filter altijd alleen op tekenreeksen moet worden gebruikt. Dat gezegd hebbende, zou een verdere verbetering van het filter kunnen worden aangebracht die door het object loopt (als het een array is) en vervolgens elk element met een hoofdletter maakt.

Laten we nu ons nieuwe filter in actie gebruiken. Ons filter kan op twee manieren worden gebruikt, hetzij in een hoeksjabloon of als een javascript-functie (als geïnjecteerde hoekreferentie).

Javascript

Injecteer eenvoudig het hoekige $filter in uw controller en gebruik dat vervolgens om de filterfunctie met zijn naam op te halen.

app.controller("MyController", function($scope, $filter){
    this.rawString = "Foo";
    this.capsString = $filter("toUppercase")(this.rawString);
});

HTML

Gebruik voor een hoekrichtlijn het symbool pipe ( | ) gevolgd door de filternaam in de richtlijn na de daadwerkelijke tekenreeks. Laten we bijvoorbeeld zeggen dat we een controller hebben met de naam MyController die een string heeft die rawString wordt genoemd.

<div ng-controller="MyController as ctrl">
    <span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>

Noot van de redactie: Angular heeft een aantal ingebouwde filters, waaronder "hoofdletters", en het filter "hoofdletters" is alleen bedoeld als demo om eenvoudig te laten zien hoe filters werken, maar u hoeft geen eigen hoofdfunctie te bouwen.

Aangepast filter om waarden te verwijderen

Een typisch gebruik voor een filter is het verwijderen van waarden uit een array. In dit voorbeeld geven we een array door en verwijderen we eventuele nulls die we teruggeven.

function removeNulls() {
    return function(list) {
        for (var i = list.length - 1; i >= 0; i--) {
            if (typeof list[i] === 'undefined' ||
                    list[i] === null) {
                list.splice(i, 1);
            }
        }
        return list;
    };
}

Dat zou in de HTML-achtige zin worden gebruikt

{{listOfItems | removeNulls}}

of in een controller zoals

listOfItems = removeNullsFilter(listOfItems);

Aangepast filter om waarden op te maken

Een ander gebruik van filters is het opmaken van een enkele waarde. In dit voorbeeld geven we een waarde door en krijgen we een geschikte echte Booleaanse waarde terug.

function convertToBooleanValue() {
    return function(input) {
        if (typeof input !== 'undefined' &&
                input !== null &&
                (input === true || input === 1 || input === '1' || input
                        .toString().toLowerCase() === 'true')) {
            return true;
        }
        return false;
    };
}

Welke in de HTML zou als volgt worden gebruikt:

{{isAvailable | convertToBooleanValue}}

Of in een controller zoals:

var available = convertToBooleanValueFilter(isAvailable);

Filter uitvoeren in een onderliggende array

Dit voorbeeld werd gedaan om aan te tonen hoe u een diep filter in een onderliggende array kunt uitvoeren zonder de noodzaak van een aangepast filter.

controller:

(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl() {
    var vm = this;
  
    vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
    vm.cars = [  
       {  
          "name":"car1",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Sedans"
             }
          ]
       },
       {  
          "name":"car2",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Commercial vehicle"
             }
          ]
       },
       {  
          "name":"car3",
          "classifications":[  
             {  
                "name":"Sport car"
             },
             {  
                "name":"Sedans"
             }
          ]
       }
    ];
  }
})();

Visie:

<body ng-app="app" ng-controller="mainCtrl as main">
  Filter car by classification:
  <select ng-model="classificationName"
          ng-options="classification for classification in main.classifications"></select>
  <br>
  <ul>
    <li ng-repeat="car in main.cars |
                   filter: { classifications: { name: classificationName } } track by $index"
                  ng-bind-template="{{car.name}} - {{car.classifications | json}}">
    </li>
  </ul>
</body>

Controleer de volledige DEMO .

Filters gebruiken in een controller of service

Door $filter injecteren, kan elk gedefinieerd filter in uw Angular-module worden gebruikt in controllers, services, richtlijnen of zelfs andere filters.

angular.module("app")
  .service("users", usersService)
  .controller("UsersController", UsersController);

function usersService () {
  this.getAll = function () {
    return [{
      id: 1,
      username: "john"
    }, {
      id: 2,
      username: "will"
    }, {
      id: 3,
      username: "jack"
    }];
  };
}

function UsersController ($filter, users) {
  var orderByFilter = $filter("orderBy");

  this.users = orderByFilter(users.getAll(), "username");
  // Now the users are ordered by their usernames: jack, john, will

  this.users = orderByFilter(users.getAll(), "username", true);
  // Now the users are ordered by their usernames, in reverse order: will, john, jack
}

Toegang tot een gefilterde lijst van buiten een ng-herhaling

Af en toe wil je toegang krijgen tot het resultaat van je filters van buiten de ng-repeat , misschien om het aantal items aan te duiden dat is uitgefilterd. U kunt dit doen as [variablename] syntaxis as [variablename] op de ng-repeat .

<ul>
  <li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
    {{item.name}}
  </li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>