AngularJS中$scope.status(排序例子)

最新推荐文章于 2024-08-20 06:30:22 发布

Future_Master_L

最新推荐文章于 2024-08-20 06:30:22 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40321535/article/details/78788732

本文介绍了一个使用AngularJS实现的简单表格排序功能。通过一个包含编号、点击数和标题等字段的数据集，演示了如何利用AngularJS内置的orderBy过滤器进行动态排序。当用户点击表头时，表格会根据所选字段进行升序或降序排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="Mapp" ng-controller="Mctrl">
        <table border="1px" cellspacing="0" cellpadding="0">
            <tr>
                <th ng-click="orderBy('id')">编号</th>
                <th>点击数</th>
                <th>标题</th>
            </tr>
            <tr ng-repeat="(k,v) in data">
                <td>{{v.id}}</td>
                <td>{{v.click}}</td>
                <td>{{v.title}}</td>
            </tr>
        </table>
        <script>
            var m = angular.module("Mapp", [])
                m.controller("Mctrl", function($scope,$filter) {
                    $scope.data = [{
                        id: 1,
                        click: 100,
                        title: '罗马'
                    },{
                        id: 2,
                        click: 200,
                        title: '伊利'
                    },{
                        id: 3,
                        click: 300,
                        title: '阿富汗'
                    }];
                    $scope.status={id:false,click:false,title:false};
                    $scope.orderBy = function(field){
                        $scope.status[field]=!$scope.status[field];
                        alert($scope.status[field])
                        $scope.data = $filter("orderBy")($scope.data,field,$scope.status[field])
                    }
                })
        </script>
    </body>

</html>