如何在AngularJS中通过ng-click实现嵌套数组多字段升降序排序

Here's how you can implement the sorting functionality you need, with default price ascending order and toggleable sort directions for each field:

Step 1: Update the Controller #

First, we'll add state variables to track the current sort field and direction, plus a helper function to handle nested data access and date conversion for the time field:

var app = angular.module('aaa',[]); 
app.controller('myCtrl', function($scope) {
    // Your original data
    $scope.myData = [
        { lstjourney: { 0: { lstit: { 0: { address: 'mumbai', price: 9255, time: '10-nov-2018 08:54:19 am' } } } } },
        { lstjourney: { 0: { lstit: { 0: { address: 'Vikroli', price: 4556, time: '04-nov-2018 08:54:19 am' } } } } },
        { lstjourney: { 0: { lstit: { 0: { address: 'Hyderabad', price: 5896, time: '10-nov-2018 08:54:19 am' } } } } }
    ];

    // Initialize sort state: default to price ascending
    $scope.sortField = 'price';
    $scope.reverse = false;

    // Toggle sort field or direction on click
    $scope.SortFun = function(field) {
        if ($scope.sortField === field) {
            // Same field clicked: flip the sort direction
            $scope.reverse = !$scope.reverse;
        } else {
            // New field clicked: switch to ascending order for the new field
            $scope.sortField = field;
            $scope.reverse = false;
        }
    };

    // Helper function to get nested values and convert time to Date for proper sorting
    $scope.getSortValue = function(item) {
        const value = item.lstjourney[0].lstit[0][$scope.sortField];
        // Convert time string to Date object so sorting is chronological, not lexicographical
        if ($scope.sortField === 'time') {
            return new Date(value);
        }
        return value;
    };
});

Step 2: Update the HTML #

Next, modify your HTML to apply the orderBy filter, add visual indicators for sort direction, and keep your existing click handlers:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="aaa" ng-controller="myCtrl">
    <ul>
        <li ng-click="SortFun('price')">
            price 
            <span ng-if="sortField === 'price'">{{reverse ? '↓' : '↑'}}</span>
        </li>
        <li ng-click="SortFun('time')">
            time 
            <span ng-if="sortField === 'time'">{{reverse ? '↓' : '↑'}}</span>
        </li>
        <li ng-click="SortFun('address')">
            address 
            <span ng-if="sortField === 'address'">{{reverse ? '↓' : '↑'}}</span>
        </li>
    </ul>
    <!-- Apply orderBy filter using our helper function and sort state -->
    <div ng-repeat="(names,itemR) in myData | orderBy:getSortValue:reverse">
        <div ng-repeat="(name,item) in itemR.lstjourney ">
            {{item.lstit[0].price}}---{{item.lstit[0].time}}-- {{item.lstit[0].address}}
        </div>
    </div>
</div>

Key Features Explained: #

• Default Sort: Starts with price in ascending order (lowest to highest).
• Toggle Behavior: Clicking an active sort field flips its direction (ascending ↔ descending). Clicking a new field switches to that field in ascending order.
• Time Sorting: Converts time strings to Date objects to ensure chronological sorting instead of alphabetical.
• Visual Feedback: Shows an arrow next to the active sort field to indicate current direction (↑ for ascending, ↓ for descending).

This implementation works seamlessly with your nested data structure and adheres to AngularJS best practices for filtering and state management.

内容的提问来源于stack exchange，提问作者shiva kumar s