Penjelasan terperinci tentang menggunakan Penapis dalam Angularjs_AngularJS

Fungsi Penapis adalah untuk menerima input, memprosesnya melalui peraturan tertentu, dan kemudian mengembalikan hasil yang diproses kepada pengguna. Penapis boleh digunakan dalam templat, pengawal atau perkhidmatan, dan ia juga mudah untuk menyesuaikan Penapis.

Gunakan Penapis dalam templat

Penapis boleh digunakan dalam templat paparan menggunakan ungkapan sintaks berikut:

{{ ungkapan | penapis }}

Contohnya: Format {{ 12 | mata wang }} menggunakan penggunaan penapis mata wang untuk menapis nombor 12 ke dalam bentuk mata wang, dan hasilnya ialah $12.00.

Penapis boleh digunakan pada hasil penapisan lain. Ini dipanggil "rantaian" dan digunakan dengan sintaks berikut:

{{ penapisan | Parameter mungkin diperlukan dalam Penapis. Sintaksnya ialah:

Contohnya: Format {{ 1234 |. nombor:2 }} menggunakan penggunaan penapis nombor untuk menapis nombor 1234 menjadi nombor dengan dua titik perpuluhan.

Anda boleh menggunakan penapis dalam pengawal, perkhidmatan dan arahan.

Untuk melakukan ini, anda perlu menyuntik nama kebergantungan ke dalam pengawal/perkhidmatan/arahan anda: penapis; Parameter yang disuntik ialah fungsi yang mengambil nilai sebagai parameter pertama dan kemudian menggunakan parameter kedua untuk menapis parameter.

Contoh berikut menggunakan Penapis yang dipanggil penapis. Penapis ini boleh mengurangkan tatasusunan berdasarkan sub tatasusunan. Anda juga boleh menggunakan penanda dalam templat paparan, seperti: {{ctrl.array|filter:'a'}}, yang akan melakukan carian teks penuh untuk 'a'. Walau bagaimanapun, menggunakan penapis dalam templat paparan akan menapis semula setiap penapis, dan jika tatasusunan agak besar, ia akan dimuatkan beberapa kali.

Jadi contoh berikut memanggil terus penapis dalam pengawal. Melalui ini, pengawal boleh memanggil penapis apabila diperlukan (contohnya: apabila data bahagian belakang dimuatkan atau ungkapan penapis berubah).

index.html:

<div ng-controller="FilterController as ctrl">
 <div>
  All entries:
  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
 </div>
 <div>
  Entries that contain an "a":
  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
 </div>
</div>
 

angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
 this.array = [
  {name: 'Tobias'},
  {name: 'Jeff'},
  {name: 'Brian'},
  {name: 'Igor'},
  {name: 'James'},
  {name: 'Brad'}
 ];
 this.filteredArray = filterFilter(this.array, 'a');
}]);

All entries: Tobias Jeff Brian Igor James Brad
Entries that contain an "a": Tobias Brian James Brad

Menulis penapis anda sendiri adalah sangat mudah: hanya daftarkan fungsi kilang penapis baharu dalam modul anda. Secara dalaman, filterProvider digunakan di sini. Fungsi kilang ini harus mengembalikan fungsi penapis baharu dengan nilai input sebagai hujah pertama. Sebarang parameter penapis diluluskan sebagai parameter tambahan kepada fungsi penapis.

Fungsi penapis ini sepatutnya menjadi fungsi yang mudah. Ini bermakna ia sepatutnya tidak mempunyai kewarganegaraan dan idempoten. Apabila fungsi input berubah, Angular bergantung pada sifat ini dan melaksanakan penapis.

Nota: Nama penapis mestilah pengecam ungkapan sudut yang sah. Contohnya huruf besar atau orderBy. Aksara khas tidak dibenarkan dalam nama, seperti tanda sempang dan noktah tidak dibenarkan. Jika anda mahu penapis anda diberi ruang nama, maka anda boleh menggunakan huruf besar (myappSubsectionFilterx) atau garis bawah (myapp_subsection_filterx).

Penapis contoh berikut membalikkan rentetan. Selain itu, ia boleh menambah syarat untuk menjadikan rentetan huruf besar.

index.html

<div ng-controller="MyController">
 <input ng-model="greeting" type="text"><br>
 No filter: {{greeting}}<br>
 Reverse: {{greeting|reverse}}<br>
 Reverse + uppercase: {{greeting|reverse:true}}<br>
 Reverse, filtered in controller: {{filteredGreeting}}<br>
</div>
 

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
 return function(input, uppercase) {
  input = input || '';
  var out = "";
  for (var i = 0; i < input.length; i++) {
   out = input.charAt(i) + out;
  }
  // conditional based on optional argument
  if (uppercase) {
   out = out.toUpperCase();
  }
  return out;
 };
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
 $scope.greeting = 'hello';
 $scope.filteredGreeting = reverseFilter($scope.greeting);
}]);

No filter: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh

Adalah sangat disyorkan untuk menulis penapis stateful kerana ini tidak boleh dioptimumkan dengan Angular, yang sering membawa kepada isu prestasi. Banyak penapis stateful ditukar kepada penapis stateless hanya dengan mendedahkan keadaan tersembunyi sebagai model dan menukarnya menjadi parameter penapis.

Walau bagaimanapun, jika anda perlu menulis penapis stateful, anda mesti menandakan penapis sebagai $stateful, yang bermaksud bahawa ia akan dilaksanakan satu kali atau lebih semasa setiap kitaran $digest.

indeks,html

<div ng-controller="MyController">
 Input: <input ng-model="greeting" type="text"><br>
 Decoration: <input ng-model="decoration.symbol" type="text"><br>
 No filter: {{greeting}}<br>
 Decorated: {{greeting | decorate}}<br>
</div>
 

angular.module('myStatefulFilterApp', [])
.filter('decorate', ['decoration', function(decoration) {

 function decorateFilter(input) {
  return decoration.symbol + input + decoration.symbol;
 }
 decorateFilter.$stateful = true;

 return decorateFilter;
}])
.controller('MyController', ['$scope', 'decoration', function($scope, decoration) {
 $scope.greeting = 'hello';
 $scope.decoration = decoration;
}])
.value('decoration', {symbol: '*'});

No filter: hello
Decorated: *hello*