gaurav.s23 Ответов: 1

Как отсортировать таблицу с помощью пользовательской сортировки в angular js

My Table 

[Store Number]	[opening closing time]	[opening closing time]	[Profit (%)]
----------------------------------------------------------------------------- 
1					8--10						100					  23	
2					9--10						70					  15
3					10--10						60					  8
4					8--8						95					  20
5					8--9						70					  17
6					9--9						85					  19		

I am able to sort the data asc and desc order where the data is in int value but not where data in 
string. Here in example i could not sort the column [opening closing time] as it has to be sort
by the time interval difference. How do i achieve this ? I need to implement sort functionality in all
column. Rest 3 columns works as desired. But i do not know how do i implement sorting in 
[opening closing time] column? 


My HTML
<table>
<thead>
	<tr>
		<th ng-click="sortRdata('StoreNum')">Store Number</th>
		<th ng-click="sortRdata('OperatingHours')">opening closing time</th>
		<th ng-click="sortRdata('AvgCustNum')">opening closing time</th>
		<th ng-click="sortRdata('Profit')">Profit (%)</th>	
	</tr>
</thead>
<tbody>
		<tr ng-repeat="r in StoreReports|orderBy:sortRcolumn:reverseRsort ">
		 <td>{{::r.StoreNum}}</td>
         <td>{{::r.OperatingHours}}</td>
         <td>{{::r.AvgCustNum}}</td>
         <td>{{::r.Profit}}</td>
		</tr>
</tbody>
</table>


Javascipt Code:
    $scope.sortRcolumn = "StoreNum";
    $scope.reverseRsort = false;

    $scope.sortRdata = function (column) {
        $scope.reverseRsort = ($scope.sortRcolumn == column) ? !$scope.reverseRsort : false;
        $scope.sortRcolumn = column;
    }


Что я уже пробовал:

$scope.sdata = function (OperatingHours) {
       var operatingHrArray = operatingHours.slpit('');
       var openingHour = parseInt(operatingHrArray[0]);
       var closingHour = parseInt(operatingHrArray[3]) + 12;
       return closingHour - openingHour;
   }

1 Ответов

Рейтинг:
7

Karthik_Mahalingam

попробуйте этот способ

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="myCtrl">
 


        <table>
            <thead>
                <tr>
                    <th ng-click="sortRdata('StoreNum')">Store Number</th>
                    <th ng-click="sortRdata('OperatingHours')">opening closing time</th>
                    <th ng-click="sortRdata('AvgCustNum')">opening closing time</th>
                    <th ng-click="sortRdata('Profit')">Profit (%)</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="r in StoreReports|orderBy:sortRcolumn:reverseRsort ">
                    <td>{{::r.StoreNum}}</td>
                    <td>{{::r.OperatingHours}}</td>
                    <td>{{::r.AvgCustNum}}</td>
                    <td>{{::r.Profit}}</td>
                </tr>
            </tbody>
        </table>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.sortRcolumn = "StoreNum";
            $scope.reverseRsort = false;

            var data = [
                { StoreNum: 1, OperatingHours: '8--10', AvgCustNum: 100, Profit: 23 },
                { StoreNum: 2, OperatingHours: '9--10', AvgCustNum: 70, Profit: 15 },
                { StoreNum: 3, OperatingHours: '10--10', AvgCustNum: 60, Profit: 8 },
                { StoreNum: 4, OperatingHours: '8--8', AvgCustNum: 95, Profit: 20 },
                { StoreNum: 5, OperatingHours: '8--9', AvgCustNum: 70, Profit: 17 },
                { StoreNum: 6, OperatingHours: '9--9', AvgCustNum: 85, Profit: 19 },
            ];

            var newData = [];
            for (var i = 0; i < data.length; i++) {
                var obj = data[i];
                obj.OperatingHoursNumber = parseInt(obj.OperatingHours.split('--')[0]);
                newData.push(obj);
            }
             

            $scope.StoreReports = newData; 
           
            $scope.sortRdata = function (column) {
               
                if (column == 'OperatingHours')
                    column = 'OperatingHoursNumber'
                $scope.reverseRsort = ($scope.sortRcolumn == column) ? !$scope.reverseRsort : false;
                $scope.sortRcolumn = column;
            }

        });
    </script>



</body>
</html>

gaurav.s23

Сэр , сейчас он сортируется по часам начала работы, но он должен сокращать время открытия каждого магазина. например, магазин 1 открывается на 14 часов, а магазин 3 - на 12 часов.

Karthik_Mahalingam

как вы рассчитаете общее количество часов

gaurav.s23

часы работы 8-10 означает, что он открывается в 8 утра и закрывается в 10 вечера и так далее, сэр

Karthik_Mahalingam

как вы узнаете, что сейчас 10 утра или 10 вечера

gaurav.s23

Глядя на необработанные данные, я не мог сказать, как они были добавлены в таблицу. но, глядя на модель магазина, он работает 8 часов в день и открывается утром.

Karthik_Mahalingam

ок, я предполагаю, что к концу времени в личку

Karthik_Mahalingam

пробовать

 var newData = [];
            for (var i = 0; i < data.length; i++) {
                var obj = data[i];
                var parts = obj.OperatingHours.split('--');
                var start = 12- parseFloat( parts[0])
                var end = parseFloat(parts[1])
                obj.OperatingHoursNumber = start + end;
                newData.push(obj);
            }

gaurav.s23

Сначала я попробую вот это. благодарю вас сэр

Karthik_Mahalingam

крутой