Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
更新時(shí)間：2017年12月29日 12:11:16 作者：當(dāng)愛0201
這篇文章主要介紹了Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能。分享給大家供大家參考，具體如下：
先來看看運(yùn)行效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.fzitv.net Angular模糊查詢、排序</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
margin: 100px auto;
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 1px solid #000;
}
</style>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.books=[{
name:"JavaScript",public:false,update:"1504707661308",has:true
},{
name:"Angular權(quán)威教程",public:false,update:"1204707661308",has:false
},{
name:"Vue實(shí)戰(zhàn)",public:false,update:"1804707661308",has:false
},{
name:"JavaScript",public:true,update:"1504707561308",has:true
}];
$scope.price="99.9";
/*$scope.filt=""*/
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="filt">
<table>
<thead><tr>
<th>名字</th>
<th>出版情況</th>
<th>更新時(shí)間</th>
<th>是否有庫(kù)存</th>
</tr></thead>
<tbody>
<!--|limitTo:2顯示兩條數(shù)據(jù)-->
<tr ng-repeat="item in books | filter:filt |orderBy:'-name':false">
<td>{{item.name|lowercase}}</td>
<td>{{item.public}}</td>
<td>{{item.update |date:'yyyy年MM月dd日 hh:mm:ss EEE'}}</td>
<td>{{item.has}}</td>
</tr>
</tbody>
</table>
<div>{{price|currency:"￥"}}</div>
</body>
</html>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
angularjs利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤的示例
下面小編就為大家?guī)硪黄猘ngularJS利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
AngularJS基礎(chǔ) ng-switch 指令簡(jiǎn)單示例
本文主要講解AngularJS ng-switch 指令,這里對(duì)ng-switch 指令的基礎(chǔ)資料做了詳細(xì)整理，并附代碼示例，有興趣的小伙伴可以參考下2016-08-08
Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法
這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法，文中給出了詳細(xì)的介紹和示例代碼，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要介紹了AngularJS過濾器filter用法,結(jié)合實(shí)例形式分析了過濾器filter的定義與使用技巧,需要的朋友可以參考下2016-11-11
angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
angular 基于ng-messages的表單驗(yàn)證實(shí)例
本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
angular.js實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angular.js購(gòu)物車功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了詳解angular ui-grid之過濾器設(shè)置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
下面小編就為大家?guī)硪黄斦凙ngularJs 控制器、數(shù)據(jù)綁定、作用域。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程
這篇文章主要給大家介紹了關(guān)于Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05