Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能示例
更新時間：2017年12月13日 12:22:58 作者：Web攻城獅
這篇文章主要介紹了Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關搜索、查詢、排序操作技巧,需要的朋友可以參考下
本文實例講述了Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能。分享給大家供大家參考，具體如下：
利用angularjs實現(xiàn)動態(tài)的插入以及利用過濾器進行數(shù)據(jù)的搜索以及排序.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>www.dhdzp.com AngularJS過濾器測試</title>
</head>
<body ng-controller="app">
<table>
<tr>
<td ng-click="sort('name')">姓名</td>
<td ng-click="sort('age')">年齡</td>
</tr>
<tr ng-repeat="arr1 in arr1">
<td>{{arr1.name}}</td>
<td>{{arr1.age}}</td>
</tr>
</table>
<input id="wei" type="text" ng-focus="concentrate()" >
<input type="button" ng-click="search()" value="搜索">
</body>
<script src="angular.min.js"></script>
<script src="jquery.js"></script>
<script>
// var wei = document.getElementById("wei");
// console.log(wei);
// setTimeout(function(){
// $("#wei").attr("disabled",false);
// },3000);
var m=angular.module("myApp",[]);
m.controller("app",["$scope","$filter",function($scope,$filter){
var arr=[
{"name":"豬","age":20},
{"name":"小豬","age":23},
{"name":"大貓","age":227},
{"name":"老虎","age":29},
{"name":"中虎","age":29},
{"name":"老虎","age":39},
{"name":"老貓","age":47},
{"name":"熊貓","age":29},
{"name":"樹懶","age":27},
{"name":"獅子","age":59}
];
$scope.arr1=arr;
//實現(xiàn)查詢功能
var isopen=true;
$scope.sort=function(str){
$scope.arr1=$filter("orderBy")($scope.arr1,str,isopen);
isopen=!isopen;
//console.log(isopen);
};
$scope.concentrate=function(){
console.log("已聚焦");
}
//實現(xiàn)查詢功能
$scope.search=function(){
console.log(11);
$scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);
}
}]);
</script>
</html>
運行效果：
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
今天小編就為大家分享一篇對angular2中的ngfor和ngif指令嵌套實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了AngularJS折疊菜單實現(xiàn)方法,結合完整實例形式分析了AngularJS實現(xiàn)折疊菜單的具體步驟與相關操作技巧,需要的朋友可以參考下2017-05-05
在項目中遇到這樣的需求想把下拉框的單選改為多選，怎么實現(xiàn)呢？下面小編通過本文給大家分享angularjs單選改為多選的開發(fā)過程及問題解析，需要的朋友參考下2017-02-02
下面小編就為大家?guī)硪黄褂胊ngular幫你實現(xiàn)拖拽的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
angular.JS實現(xiàn)網(wǎng)頁禁用調試、復制和剪切
這篇文章主要給大家介紹了angular.JS實現(xiàn)網(wǎng)頁禁用調試、復制和剪切的相關資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了Angular開發(fā)實踐之服務端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Angular.JS實現(xiàn)無限級的聯(lián)動菜單(使用demo)
這篇文章主要介紹了Angular.JS中實現(xiàn)無限級聯(lián)動菜單的使用示例，本文是在之前的一篇文章的基礎上進行的幾個demo分享，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
angular基于ng-alain定義自己的select組件示例
這篇文章主要介紹了angular基于ng-alain定義自己的select組件示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本文介紹了Angular父子組件是如何通訊的，對此感興趣的同學，可以參考下，并且親自實驗一下。2021-05-05
本篇文章主要介紹了AngularJS 前臺分頁實現(xiàn)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06