AngularJS сортировка стола

У меня есть table, который сортирует в порядке. Сортировка происходит, но не совсем так, как я хочу.AngularJS сортировка стола

Моя проблема заключается в том, что таблица получает значение по умолчанию в порядке возрастания при каждом сортировке в другом столбце. Поскольку это стоит, как код работает, что она будет чередоваться между восходящей и нисходящей связи с этим изменением между ложным и истинным:

$scope.sortReverse = false;

То, что я хочу, чтобы добавить что-то, чтобы сделать его по умолчанию ложным, когда вы измените который вы сортируете. Ниже приведен PLNKR. Вы обнаружите, что он будет чередоваться между восходящим и нисходящим, несмотря ни на что. Мне нужно, чтобы он менялся на восходящий, когда сортировался по другому столбцу, даже если он спускался в то время.

По сути, я считаю, что необходимо применять третий бит, но я пока не могу его решить.

Любые идеи будут оценены.

http://plnkr.co/edit/LrnPj1nx4sdQD8F9ctKB?p=preview

источник

2015-10-01 TheLimeTrees

При изменении сортировки, установите обратный флаг ложной. Взгляните на функцию setSortingColumn.

var app = angular.module("myApp", ['ui.bootstrap']); 
 
app.filter('unique', function() { 
 

 
    return function(arr, field) { 
 
     var o = {}, 
 
     i, l = arr.length, 
 
     r = []; 
 
     for (i = 0; i < l; i += 1) { 
 
     o[arr[i][field]] = arr[i]; 
 
     } 
 
     for (i in o) { 
 
     r.push(o[i]); 
 
     } 
 
     return r; 
 
    }; 
 
}) 
 

 
app.controller("maincontroller", function($scope) { 
 
    $scope.query = {}; 
 
    $scope.quer = {}; 
 
    $scope.queryBy = '$'; 
 
    $scope.isCollapsed = true; 
 
    $scope.selectedRefs = []; 
 

 
    $scope.setSortingColumn = function(sortType) { 
 
     if ($scope.sortType == sortType) 
 
     $scope.sortReverse = !$scope.sortReverse; 
 
     else { 
 
     $scope.sortType = sortType; 
 
     $scope.sortReverse = false; 
 
     } 
 
    }; 
 
    
 
    $(document).ready(function() { 
 
     $('[data-toggle="tooltip"]').tooltip({ 
 
     trigger: "hover", 
 
     placement: "top", 
 
     delay: { 
 
      show: 500, 
 
      hide: 100 
 
     } 
 
     }); 
 
    }); 
 
    $scope.projects = [{ 
 
     a: "G", 
 
     b: "123", 
 
     c: "1", 
 
     d: "D6", 
 
     e: "O1", 
 
     f: "B" 
 
     }, { 
 
     a: "R", 
 
     b: "406", 
 
     c: "2", 
 
     d: "D5", 
 
     e: "O2", 
 
     f: "B" 
 
     }, { 
 
     a: "G", 
 
     b: "519", 
 
     c: "3", 
 
     d: "D4", 
 
     e: "O3", 
 
     f: "P" 
 
     }, { 
 
     a: "G", 
 
     b: "867", 
 
     c: "4", 
 
     d: "DK", 
 
     e: "O4", 
 
     f: "B" 
 
     }, { 
 
     a: "R", 
 
     b: "654", 
 
     c: "5", 
 
     d: "D2", 
 
     e: "O5", 
 
     f: "P" 
 
     }, { 
 
     a: "R", 
 
     b: "321", 
 
     c: "6", 
 
     d: "D1", 
 
     e: "O6", 
 
     f: "P" 
 
     }, { 
 
     a: "G", 
 
     b: "123", 
 
     c: "7", 
 
     d: "D6", 
 
     e: "O1", 
 
     f: "B" 
 
     }, { 
 
     a: "R", 
 
     b: "456", 
 
     c: "8", 
 
     d: "D5", 
 
     e: "O2", 
 
     f: "B" 
 
     }, { 
 
     a: "G", 
 
     b: "789", 
 
     c: "9", 
 
     d: "D4", 
 
     e: "O13", 
 
     f: "P" 
 
     }, { 
 
     a: "G", 
 
     b: "987", 
 
     c: "10", 
 
     d: "D3", 
 
     e: "O4", 
 
     f: "B" 
 
     }, { 
 
     a: "R", 
 
     b: "654", 
 
     c: "11", 
 
     d: "D2", 
 
     e: "O5", 
 
     f: "P" 
 
     }, { 
 
     a: "G", 
 
     b: "321", 
 
     c: "12", 
 
     d: "D1", 
 
     e: "O6", 
 
     f: "P" 
 
     }, 
 

 
     { 
 
     a: "G", 
 
     b: "301", 
 
     c: "13", 
 
     d: "D1", 
 
     e: "O6", 
 
     f: "P" 
 
     }, 
 
    ]; 
 

 
    $scope.sortType = 'c'; 
 
    $scope.sortReverse = false; 
 

 
});

<!doctype html> 
 
<html lang="en" ng-app="myApp" ng-controller="maincontroller"> 
 

 
<head> 
 

 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
</head> 
 
<body> 
 
    <div id="divfix"> 
 
    <br> 
 
    <div class="col-md-10"> 
 
    <div id="tbl"> 
 
     <table class="table table-hover table-bordered" id="projlist"> 
 
      <thead> 
 
       <tr> 
 
       <th class="status borderless" id="brdrhide"></th> 
 

 
       <th tabindex="30" style="border:2px solid #C7CED1;" id="refwidth1" class="refwidth" ng-keypress="setSortingColumn('b')" ng-click="setSortingColumn('b')">Ref 
 
        <span ng-show="sortType != 'b'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'b' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'b' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th> 
 

 
       <th tabindex="40" style="border:2px solid #C7CED1;" class="servwidth" ng-keypress="setSortingColumn('c')" ng-click="setSortingColumn('c')">Service 
 
        <span ng-show="sortType != 'c'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'c' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'c' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th> 
 

 
       <th tabindex="50" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('d')" ng-click="setSortingColumn('d')">Domain 
 
        <span ng-show="sortType != 'd'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'd' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'd' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th> 
 

 
       <th tabindex="60" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('e')" ng-click="setSortingColumn('e')">Service Owner 
 
        <span ng-show="sortType != 'e'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'e' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'e' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th> 
 

 
       <th tabindex="70" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('f')" ng-click="setSortingColumn('f')">Lifecycle 
 
        <span ng-show="sortType != 'f'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'f' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span> 
 
        <span ng-show="sortType == 'f' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th> 
 
       </tr> 
 
      </thead> 
 
      <tbody id="tbl6"> 
 
       <tr id="tbl7" class="tt" ng-class="{even: $even, odd: $odd}" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:sortType:sortReverse"> 
 
       <td id="brdrhide1" ng-class="{'glyphicon glyphicon-alert icon-success': x.a == 'R'}"><b ng-if="x.a != 'R'"></b> 
 
        <td id="refwidth" class="shrink">{{x.b}}</td> 
 
        <td class="shrink"><u>{{x.c}}</u></td> 
 
        <td class="shrink">{{x.d}}</td> 
 
        <td class="shrink">{{x.e}}</td> 
 
        <td class="shrink">{{x.f}}</td> 
 
       </tr> 
 
       <tr collapse="isCollapsed" ng-repeat-end=""> 
 
       <td colspan="6"> 
 
        <h3>Test</h3> 
 
        <p>Test</p> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-10-01 09:28:25 Artiom

Пожалуйста, найдите время, чтобы отформатировать код правильно, прежде чем отправлять ответ, в нынешнем виде кода очень трудно читать – LionC

хорошее решение, я буду иметь это в виду, для будущее. Спасибо за помощь! – TheLimeTrees

@ LionC сделано. Это был просто экземпляр, вставленный из вопроса. – Artiom

AngularJS сортировка стола

ответ

Смежные вопросы