Angular를 사용하여 삼각형 화살표 라벨링 기능을 구현하는 방법
- 亚连원래의
- 2018-06-14 16:45:211794검색
이 글에서는 주로 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.js에서 컴포넌트와 해당 기능을 사용하는 방법에 대한 자세한 해석?
위 내용은 Angular를 사용하여 삼각형 화살표 라벨링 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.