AngularJS
filter

Din första filter

Filter är en speciell typ av funktion som kan ändra hur något skrivs ut på sidan, eller kan användas för att filtrera en matris eller en ng-repeat . Du kan skapa ett filter genom att anropa app.filter() och lämna det ett namn och en funktion. Se exemplen nedan för information om syntax.

Låt oss till exempel skapa ett filter som kommer att ändra en sträng till att vara alla stora versaler (i huvudsak ett omslag till .toUpperCase() -javaskriptfunktionen):

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();
    };
}); 

Låt oss titta närmare på vad som händer ovan.

Först skapar vi ett filter som heter "toUppercase", som är precis som en controller; app.filter(...) . Sedan returnerar filterfunktionen den faktiska filterfunktionen. Denna funktion tar ett enda objekt, som är det objekt som ska filtreras, och bör returnera den filtrerade versionen av objektet.

Obs: I den här situationen antar vi att objektet som skickas in i filtret är en sträng, och därför vet vi alltid använda filtret endast på strängar. Med det sagt kan en ytterligare förbättring av filtret göras som slingrar genom objektet (om det är en matris) och sedan gör varje element som är en sträng med stora versaler.

Låt oss nu använda vårt nya filter i aktion. Vårt filter kan användas på två sätt, antingen i en vinkelmall eller som en javascript-funktion (som en injicerad vinkelreferens).

Javascript

Injicera helt enkelt det vinklade $filter till din styrenhet och använd det för att hämta filterfunktionen med dess namn.

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

html

För ett vinkeldirektiv, använd rörsymbolen ( | ) följt av filternamnet i direktivet efter den aktuella strängen. Låt oss till exempel säga att vi har en controller som heter MyController som har en sträng som heter rawString som ett element i den.

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

Redaktörens anmärkning: Angular har ett antal inbyggda filter, inklusive "versaler", och "toUppercase" -filtret är endast avsett som en demo för att enkelt visa upp hur filter fungerar, men du behöver inte bygga din egen huvudfunktion.

Anpassat filter för att ta bort värden

Ett typiskt användningsfall för ett filter är att ta bort värden från en matris. I det här exemplet passerar vi in en matris och tar bort alla nollor som finns i den och returnerar arrayen.

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;
    };
}

Det skulle användas i HTML som

{{listOfItems | removeNulls}}

eller i en controller som

listOfItems = removeNullsFilter(listOfItems);

Anpassat filter för att formatera värden

Ett annat användningsfall för filter är att formatera ett enda värde. I det här exemplet skickar vi in ett värde och vi får tillbaka ett riktigt booleskt värde.

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;
    };
}

Vilket i HTML: n skulle användas så här:

{{isAvailable | convertToBooleanValue}}

Eller i en controller som:

var available = convertToBooleanValueFilter(isAvailable);

Utföra filter i ett barnfält

Detta exempel gjordes för att visa hur man kan utföra en djup filter i ett barn array utan nödvändigheten av ett anpassat filter.

Kontrollant:

(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"
             }
          ]
       }
    ];
  }
})();

Se:

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

Kontrollera hela DEMO .

Använda filter i en controller eller tjänst

Genom att injicera $filter kan alla definierade filter i din vinkelmodul användas i styrenheter, tjänster, direktiv eller till och med andra filter.

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
}

Öppna en filtrerad lista utanför en ng-repetition

Ibland vill du komma åt resultatet av dina filter utanför ng-repeat , kanske för att ange antalet objekt som har filtrerats ut. Du kan göra detta genom att använda as [variablename] -syntax på 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>