ホームページ > 記事 > ウェブフロントエンド > Angularjsフィルターを使用して動的検索を実装する方法
Angularjsフィルターを使用して動的検索を実装する方法
- 亚连オリジナル
- 2018-06-20 18:18:431360ブラウズ
この記事では、主に動的検索と並べ替え機能を実装するための Angularjs フィルターを紹介します。AngularJS フィルター関連の検索、クエリ、並べ替え操作のスキルが必要な方は参考にしてください。
この記事では、動的検索と並べ替え機能を実装するための Angularjs フィルターの例について説明します。検索・並べ替え機能。参考のために皆さんと共有してください。詳細は次のとおりです:
angularjs を使用して動的挿入を実装し、フィルターを使用してデータを検索および並べ替えます
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 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;
//实现查询功能
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("已聚焦");
}
//实现查询功能
$scope.search=function(){
console.log(11);
$scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);
}
}]);
</script>
</html>操作の効果:
上記は、私が皆さんのためにまとめたものです。 、将来的には皆さんのお役に立てれば幸いです。
関連記事:
JS で Web ページに自動 Flash Kill クリックを実装する方法 (詳細なチュートリアル)
angular2 の Http リクエストの原則について (詳細なチュートリアル)
VueAwesomeSwiper の使用時によくある問題は何ですか?
Node.js クローラーを使用して Web ページリクエストを実装する方法
以上がAngularjsフィルターを使用して動的検索を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。