AngularJS 過濾內(nèi)容標(biāo)簽:filter

2018-07-26 17:28 更新

filter 是一個(gè)過濾內(nèi)容的標(biāo)簽。

如果參數(shù)是一個(gè)字符串,則列表成員中的任意屬性值中有這個(gè)字符串,即為滿足條件(忽略大小寫):

<div ng-controller="TestCtrl">
  {{ data | filter: 'b' }} <br />
  {{ data | filter: '!B' }} <br />
</div>


<script type="text/javascript">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];
});
angular.bootstrap(document.documentElement, ['app']);
</script>

可以使用對象,來指定屬性名, $ 表示任意屬性:

{{ data | filter: {name: 'A'} }} <br />
{{ data | filter: {$: '3'} }} <br />
{{ data | filter: {$: '!3'} }} <br />

自定義的過濾函數(shù)也支持:

<div ng-controller="TestCtrl">
  {{ data | filter: f }} <br />
</div>


<script type="text/javascript">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.data = [
    {name: 'B', age: 4},  
    {name: 'A', age: 1},  
    {name: 'D', age: 3},  
    {name: 'C', age: 3},  
  ];

  $scope.f = function(e){
    return e.age > 2;
  }
});
angular.bootstrap(document.documentElement, ['app']);
</script>
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號