angularjs的模糊查询，排序

最新推荐文章于 2022-03-19 19:05:32 发布

love_mysunshine

最新推荐文章于 2022-03-19 19:05:32 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/love_mysunshine/article/details/78229763

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导包-->
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        /*声明模块*/
        var myapp=angular.module("myapp",[]);
        /*为模块添加控制器*/
        myapp.controller("myctrl",function ($scope) {
            /*定义数组*/
            $scope.data=[
                {
                    "name":"zs",
                    "age":"18",
                    "sex":"girl",
                    "salary":"18000"
                },
                {
                    "name":"ls",
                    "age":"28",
                    "sex":"boy",
                    "salary":"28000"
                },{
                    "name":"ww",
                    "age":"38",
                    "sex":"girl",
                    "salary":"38000"
                }
            ]
            /*默认正序排序，*/
            $scope.revers=false;
            /*默认按name排序*/
            $scope.sortColumn="name";
            /*排序*/
            $scope.sort=function (Column) {
                /*如果按变量Column排序*/
               if($scope.sortColumn==Column){
                   /*点击age排序，默认正序排序，再次点击age,倒叙排序*/
                   $scope.revers=!$scope.revers;
               }
               /*变量赋值给常量*/
               $scope.sortColumn=Column;
            }
        })
    </script>
    <style>
        table{
            border-collapse: collapse;
        }
        tr td{
            border: 1px solid;
            width:80px;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" ng-model="search">
<table>
    <tr>
        <td ng-click="sort('name')">姓名</td>
        <td ng-click="sort('age')">年龄</td>
        <td ng-click="sort('sex')">性别</td>
        <td ng-click="sort('salary')">薪资</td>
    </tr>

    <tr ng-repeat="item in data|filter:{name:search}|orderBy:sortColumn:revers">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.salary}}</td>
    </tr>
</table>
</body>
</html>

love_mysunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs的模糊查询，排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="angular-1.5.5/angular.min.js"></script> <script> /*声明模块*/
复制链接

扫一扫