ホームページ > 記事 > ウェブフロントエンド > Angular を使用して三角矢印のラベル付け機能を実装する方法
Angular を使用して三角矢印のラベル付け機能を実装する方法
- 亚连オリジナル
- 2018-06-14 16:45:211849ブラウズ
この記事では、Angular によって実装されたカスタム ファジー クエリ、ソート、三角矢印ラベル付け機能を主に紹介します。これには、ページ テーブル要素に対する AngularJS のトラバーサル、クエリ、判断、ソート、その他の関連操作スキルが含まれます。この例では、Angular によって実装されたカスタム ファジー クエリ、並べ替え、三角矢印マーク機能について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
まず実行効果を見てみましょう:
具体的なコードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net Angular模糊查询、排序</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
border: 1px solid #000;
}
.top{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-top:10px solid red;
}
.bot{
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom:10px solid red;
}
</style>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
var userInfo=[
{name:"marry",salary:12345,sex:"girl",birthday:1505111954735},
{name:"Lily",salary:12425,sex:"girl",birthday:1505711954735},
{name:"Jeny",salary:87145,sex:"girl",birthday:1505811954735},
{name:"Rose",salary:23845,sex:"girl",birthday:1905111954735},
{name:"Tom",salary:86565,sex:"boy",birthday:1575111994735}
];
$scope.arr=userInfo;
/*自定义的模糊查询*/
$scope.search="";
$scope.searchFun=function(obj){
if($scope.search!=""){
if(obj.name.toLowerCase().indexOf($scope.search.toLowerCase())!=-1){
return true;
}else{
return false;
}
}else{
return true;
}
};
/* 排序*/
$scope.sort="name";
$scope.revers=false;
$scope.sortFun=function (column) {
if($scope.sort==column){
$scope.revers=!$scope.revers;
}else{
$scope.revers=false;
}
$scope.sort=column;
};
$scope.getClass=function(column){
if($scope.sort==column){
if($scope.revers==false){
return "top"
}else{
return "bot"
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text"ng-model="search">
<table>
<thead>
<th>编号</th>
<th ng-click="sortFun('name')">姓名<span ng-class="getClass('name')"></span></th>
<th ng-click="sortFun('salary')">薪资<span ng-class="getClass('salary')"></span></th>
<th ng-click="sortFun('sex')">性别<span ng-class="getClass('sex')"></span></th>
<th ng-click="sortFun('birthday')">生日<span ng-class="getClass('birthday')"></span></th>
</thead>
<tbody>
<tr ng-repeat="item in arr|filter:searchFun:value|orderBy:sort">
<td>{{$index}}</td>
<td>{{item.name|uppercase}}</td>
<td>{{item.salary|currency:'$'}}</td>
<td>{{item.sex}}</td>
<td>{{item.birthday|date:'yyyy-MM-dd'}}</td>
</tr>
</tbody>
</table>
</body>
</html>注: コードの一部がまだありますこれらは完全には機能していないため、興味のある友人が自分で追加できます。
上記は私があなたのためにまとめたものです。
関連記事:
webpack を介して koa2 フレームワーク アプリをパッケージ化する方法、その方法は? Vue コンポーネント開発アイデアの詳細な解釈 Vue.js でのコンポーネントとその機能の使用方法の詳細な解釈?以上がAngular を使用して三角矢印のラベル付け機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。