angular.js - angular表格点击序号进行升序，降序排序，怎么实现。

Question

<p ng-app="app" ng-controller="appController">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>内容</th>
            <th>姓名</th>
            <th>地点</th>
            <th>时间</th>
            <th ng-click="sort('id')">序号</th>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in obj | orderBy: 'id'">
                <td ng-if="$index + 1 === 1" style="color: red">{{$index + 1}}</td>
                <td ng-if="$index + 1 === 2" style="color: green">{{$index + 1}}</td>
                <td ng-if="$index + 1 === 3" style="color: yellow">{{$index + 1}}</td>
                <td ng-if="$index + 1 > 3">{{$index + 1}}</td>
                <td>{{x.Name}}</td>
                <td>{{x.City}}</td>
                <td>{{x.Country}}</td>
                <td>{{x.Country + x.City}}</td>
                <td>{{x.id}}</td>
            </tr>
        </tbody>
    </table>
</p>

//js文件
<script>
    var app = angular.module('app', []);
    app.controller('appController', function($scope, $http) {
            //数据
            $scope.obj = [
                {
                    "Name": "Alfreds Futterkiste",
                    "City": "Berlin",
                    "Country": "Germany",
                    "id": 4
                },
                {
                    "Name": "Ana Trujillo Emparedados y helados",
                    "City": "México D.F.",
                    "Country": "Mexico",
                    "id": 3
                },
                {
                    "Name": "Comércio Mineiro",
                    "City": "São Paulo",
                    "Country": "Brazil",
                    "id": 2
                }, {
                    "Name": "Ana Trujillo Emparedados y helados",
                    "City": "México D.F.",
                    "Country": "Mexico",
                    "id": 5
                }
            ];
    });
</script>

怎么实现点击序号进行升序降序的排序，新手，求详细的代码，谢谢大家。

Answer 1

htmlChanger pour :

<p ng-app="app" ng-controller="appController">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>内容</th>
            <th>姓名</th>
            <th>地点</th>
            <th>时间</th>
            <th ng-click="toggleSort()">序号</th>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in obj">
                <td ng-if="$index + 1 === 1" style="color: red">{{$index + 1}}</td>
                <td ng-if="$index + 1 === 2" style="color: green">{{$index + 1}}</td>
                <td ng-if="$index + 1 === 3" style="color: yellow">{{$index + 1}}</td>
                <td ng-if="$index + 1 > 3">{{$index + 1}}</td>
                <td>{{x.Name}}</td>
                <td>{{x.City}}</td>
                <td>{{x.Country}}</td>
                <td>{{x.Country + x.City}}</td>
                <td>{{x.id}}</td>
            </tr>
        </tbody>
    </table>
</p>

js

//js文件
<script>
    var app = angular.module('app', []);
    app.controller('appController', function($scope, $http) {
    
            $scope.sortIsAsc = true;
            
            //数据
            $scope.obj = [
                {
                    "Name": "Alfreds Futterkiste",
                    "City": "Berlin",
                    "Country": "Germany",
                    "id": 4
                },
                {
                    "Name": "Ana Trujillo Emparedados y helados",
                    "City": "México D.F.",
                    "Country": "Mexico",
                    "id": 3
                },
                {
                    "Name": "Comércio Mineiro",
                    "City": "São Paulo",
                    "Country": "Brazil",
                    "id": 2
                }, {
                    "Name": "Ana Trujillo Emparedados y helados",
                    "City": "México D.F.",
                    "Country": "Mexico",
                    "id": 5
                }
            ];
            
            $scope.toggleSort = function(){
                $scope.sortIsAsc = !$scope.sortIsAsc;
                $scope.obj.sort(function(a, b){
                    if($scope.sortIsAsc){
                        if (a.id < b.id) {
                            return -1;
                        }
                        if (a.id === b.id) {
                            return 0;
                        }
                        return 1;
                    }
                    if (a.id > b.id) {
                        return -1;
                    }
                    if (a.id === b.id) {
                        return 0;
                    }
                    return 1;
                });
            };
    });
</script>

Answer 2

Vous pouvez utiliser le filtre orderBy:'id':desc pour contrôler si le tri est par ordre croissant ou décroissant.
Le code suivant est plus facile à comprendre si vous le lisez dans l'ordre 3-2-1.
1. Cliquez une fois pour changer de description

<th ng-click="desc=!desc">序号</th>

2. Définissez la valeur d'initialisation desc = 0 dans appController

$scope.desc = 0;

3. Ajouter des conditions de tri dans le filtre

<tr ng-repeat="x in obj | orderBy: 'id':desc">