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
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 –