欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS中filter的使用實例詳解

 更新時間：2017年08月25日 14:53:12   作者：柳絮飛祭奠  
這篇文章主要介紹了AngularJS中filter的使用實例詳解的相關(guān)資料,這里提供實例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下

AngularJS中filter的使用實例詳解

一、格式化數(shù)字為貨幣格式。 

<div>{{money|currency:"$"}}</div> 
<div>{{money|currency:"RMB"}}</div>

script： 

app.controller("crl", function($scope, $filter) { 
    $scope.money="4545"; 
  });

顯示為 
 

二、lowercase 格式化字符串為小寫。 

姓名為 {{ lastName | lowercase }} 
app.controller("crl", function($scope, $filter) { 
   $scope.lastName ="AAA"; 
});

顯示為 

aaa

三、uppercase 格式化字符串為大寫。 

姓名為 {{ lastName | uppercase }} 


app.controller("crl", function($scope, $filter) { 
   $scope.lastName ="aaa"; 
});

顯示為 

AAA

四、filter 從數(shù)組項中選擇一個子集。 

<div>{{array|filter:"s"}}</div> 
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div> 
app.controller("crl", function($scope, $filter) { 
    $scope.array = [ { 
      name : 'Tobias' 
    }, { 
      name : 'Jeff' 
    }, { 
      name : 'Brian' 
    }, { 
      name : 'Igor' 
    }, { 
      name : 'James' 
    }, { 
      name : 'Brad' 
    } ]; 
  });

顯示為 

[{"name":"Tobias"},{"name":"James"}] 
Tobias 
James

五、orderBy 根據(jù)某個表達式排列數(shù)組。

輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器后跟一個冒號和一個模型名稱。模型名字前加負號為降序，默認(rèn)為升序 

<div ng-repeat="item in array|orderBy:'-name'">降序  {{item.name}}</div> 
  <div ng-repeat="item in array|orderBy:'name'">升序   {{item.name}}</div> 

app.controller("crl", function($scope, $filter) { 
    $scope.array = [ { 
      name : 'Tobias',age:"18" 
    }, { 
      name : 'Jeff',age:"19" 
    }, { 
      name : 'Brian',age:"19" 
    }, { 
      name : 'Igor',age:"55" 
    }, { 
      name : 'James',age:"19" 
    }, { 
      name : 'Brad',age:"19" 
    } ,{ 
      name : 'aaas',age:"19" 
    }]; 
  });

顯示為 

降序 Tobias 
降序 Jeff 
降序 James 
降序 Igor 
降序 Brian 
降序 Brad 
降序 aaas 
升序 aaas 
升序 Brad 
升序 Brian 
升序 Igor 
升序 James 
升序 Jeff 
升序 Tobias

5.1.多個模型排序（先按名字排序在按年齡排序） 

<div ng-repeat="item in array|orderBy:['name','age']">升序   {{item.name}}{{item.age}}</div> 

app.controller("crl", function($scope, $filter) { 
    $scope.array = [ { 
      name : 'Tobias',age:"18" 
    }, { 
      name : 'Jeff',age:"19" 
    }, { 
      name : 'Brian',age:"19" 
    }, { 
      name : 'Igor',age:"55" 
    }, { 
      name : 'James',age:"19" 
    }, { 
      name : 'adsd',age:"19" 
    } ,{ 
      name : 'adsd',age:"20" 
    }]; 
 
  });

顯示為 

升序 adsd19 
升序 adsd20 
升序 Brian19 
升序 Igor55 
升序 James19 
升序 Jeff19 
升序 Tobias18

 以上就是AngularJS filter的使用實例，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

相關(guān)文章

  • Angular項目中$scope.$apply()方法的使用詳解

    Angular項目中$scope.$apply()方法的使用詳解

    這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來看看吧。
    2017-07-07

    • 最新評論