Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Angular - filtry

Filtry

Przykładowy filtr

Filtry dodaje się do właściwości znaczników HTML. Poniżej dla modelu rep zostosowano filtr do sortowania, wyświetlania tylko 15 rekordów oraz własny filtr filter:{ language : 'C#'}.


<tr ng-repeat="rep in repos | orderBy:sortOrder | filter:{ language : 'C#'}   | limitTo:15  ">

sortOrder określa według której wartości ma się odbyć sortowanie. Właściwość ta znajduje się w kontrolerze.


$scope.sortOrder = "name";

Dodatkowo można zastosować znacznik select do zmiany trybu sortowania.


<select ng-model="sortOrder">
  <option value="+name">Nazwa Od A</option>
  <option value="-name">Nazwa Od Z</option>
  <option value="stargazers_count">Gwiazdy</option>
</select>

Własny filtr


<!doctype html>
<html ng-app="myApp">
  <head>
    <title>Filtr niestandardowy AngularJS</title>
  </head>
  <body>
    <div ng-controller="myController">
      <h2>Sortowanie i filtrowanie</h2>
      {{phrase | censor:"***"}}<br>
      {{"To jest niedobry, mroczny i ponury tekst." | censor:"radosny"}}
      <p ng-click="filterText()">{{txt}}</p>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="js/angular_filter_custom.js"></script>
  </body>
</html>

Poniższy filtr służy do zastępowania wyrazów niedobry, ponury i mroczny przez wartość replacement.


angular.module('myApp', []).
  filter('censor', function() {
    return function(input, replacement) {
      var cWords = ['niedobry', 'ponury', 'mroczny'];
      var out = input;
      for(var i=0; i < cWords.length; i++){
        out = out.replace(cWords[i], replacement);
      }
      return out;
    };
  }).
  controller('myController', ['$scope', 'censorFilter',
                              function($scope, censorFilter) {
    $scope.phrase="To jest niepoprawna fraza.";
    $scope.txt = "Kliknij, aby odfiltrowaæ wyrazy: mroczny i ponury.";
    $scope.filterText = function(){
      $scope.txt = censorFilter($scope.txt, '<>');
    };
  }]);