2017-10-18 2 views
0

J'ai un tableau de données composé de trois colonnes. Les deux premières colonnes doivent être triées par ordre alphabétique mais la troisième colonne (valeur) a besoin d'un tri personnalisé: haut, moyen, bas ou bas, moyen, haut lorsqu'il est inversé.Ordre non alphabétique AngularJSPar l'une des trois colonnes

J'ai le tri alphabétique fonctionnant jusqu'à présent, mais ayant des problèmes avec le tri personnalisé de la 3ème colonne (valeur).

JS

(function(angular) { 
'use strict'; 
angular.module('orderByExample2', []) 
.controller('ExampleController', ['$scope', function($scope) { 
var items = [ 
    {name: 'name1', type: 'Web', value: 'high'}, 
    {name: 'name2', type: 'Email', value: 'medium'}, 
    {name: 'name3', type: 'DNS', value: 'medium'}, 
    {name: 'name4', type: 'Web', value: 'high'}, 
    {name: 'name5', type: 'Web', value: 'medium'}, 
    {name: 'name6', type: 'Email', value: 'high'}, 
    {name: 'name7', type: 'Web', value: 'low'}, 
    {name: 'name8', type: 'FTP', value: 'low'}, 
    {name: 'name9', type: 'Web', value: 'high'} 

]; 

$scope.propertyName = 'value'; 
$scope.reverse = false; 
$scope.items = items; 

$scope.sortBy = function(propertyName) { 
    $scope.reverse = ($scope.propertyName === propertyName) ? 
!$scope.reverse : false; 
    $scope.propertyName = propertyName; 
}; 
}]); 
})(window.angular); 

HTML

<body ng-app="orderByExample2"> 
    <div ng-controller="ExampleController"> 
    <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre> 
    <hr/> 
    <button ng-click="propertyName = null; reverse = false">Set to default</button> 
    <hr/> 
    <table class="items"> 
     <tr> 
     <th> 
      <button ng-click="sortBy('name')">Name</button> 
      <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span> 
     </th> 
     <th> 
      <button ng-click="sortBy('type')">Type</button> 
      <span class="sortorder" ng-show="propertyName === 'type'" ng-class="{reverse: reverse}"></span> 
     </th> 
     <th> 
      <button ng-click="sortBy('value')">Value</button> 
      <span class="sortorder" ng-show="propertyName === 'value'" ng-class="{reverse: reverse}"></span> 
     </th> 
     </tr> 
     <tr ng-repeat="item in items | orderBy:propertyName:reverse"> 
     <td>{{item.name}}</td> 
     <td>{{item.type}}</td> 
     <td>{{item.value}}</td> 
     </tr> 
    </table> 
    </div> 
</body> 

Plunker: https://plnkr.co/edit/zBKd3ot22NGZd0y5XTow?p=preview

+2

Lire la documentation de orderBy: vous pouvez passer une fonction plutôt qu'un nom de propriété, et le résultat de cette fonction sera utilisé pour le tri, donc vous pouvez retourner 0 pour faible, 1 pour moyen et 2 pour haut à partir de cette fonction , par exemple. https://docs.angularjs.org/api/ng/filter/orderBy#orderBy-arguments –

Répondre

1

Comme @ dit jb-Nizet, vous aurez besoin d'une fonction personnalisée ici qui renvoie la valeur à l'ordre chaque élément par. Ceci est un moyen de mettre en œuvre cette fonction:

function sortingValue(e) { 
    return ['high', 'medium', 'low'].indexOf(e.value); 
} 

Je l'ai fait une fork of your Plunkr.

+0

Fantastique nicooga et NB Nizet. Merci pour l'aide. J'étais fermé. Question bonus alors. Comment faisons-nous le tri par défaut/initial la valeur? – mediaguru

+0

Vous pouvez simplement appeler '$ scope.sortBy ('something')' ou '$ scope.sortByValue()' dès que possible dans votre contrôleur. – nicooga