it-swarm.com.ru

упорядочить несколько полей в Angular

Как сортировать, используя несколько полей одновременно в угловых? кулак по группе, а затем по подгруппе для примера

$scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},
    {'group':2,'sub':11}];

Я хотел отобразить это как

группа: подгруппа

1 - 1

1 - 2

1 - 20

2 - 1

2 - 10

2 - 11

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />
362
gmeka

Пожалуйста, посмотрите это:

http://jsfiddle.net/JSWorld/Hp4W7/32/

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
620
Sabarish Sankar

Если вы хотите сортировать по нескольким полям внутри контроллера, используйте это 

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

Смотрите также https://docs.angularjs.org/api/ng/filter/orderBy

45
Muhammad Raza Dar
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />

Пользовательский массив вместо нескольких orderBY

21
Thambuleena

Сортировка может быть выполнена с помощью фильтра orderBy по угловому значению.

Два пути: 1. С точки зрения 2. От контроллера

  1. С точки зрения

Синтаксис:

{{array | orderBy : expression : reverse}} 

Например:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
  1. От контроллера

Синтаксис:

$filter.orderBy(array, expression, reverse);

Например:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);
5
Tessy Thomas

Есть два способа создания фильтров AngularJs, один в HTML с использованием {{}} и один в реальных файлах JS ...

Вы можете решить свою проблему с помощью:

{{ Expression | orderBy : expression : reverse}}

если вы используете его в HTML или что-то вроде:

$filter('orderBy')(yourArray, yourExpression, reverse)

Реверс необязателен в конце, он принимает логическое значение, и если это правда, он обратит массив для вас, очень удобный способ инвертировать ваш массив ...

5
Alireza

Я написал этот удобный кусок для сортировки по нескольким столбцам/свойствам объекта. При каждом последующем щелчке по столбцу код сохраняет последний нажатый столбец и добавляет его в растущий список имен строк столбцов, по которым щелкнули, помещая их в массив с именем sortArray. Встроенный Angular-фильтр "orderBy" просто читает список sortArray и упорядочивает столбцы по порядку имен столбцов, хранящихся там. Таким образом, последнее нажатое имя столбца становится основным упорядоченным фильтром, предыдущий щелкнул следующий по приоритету и т.д. Обратный порядок влияет на порядок всех столбцов одновременно и переключает возрастание/убывание для полного набора списка массивов:

<script>
    app.controller('myCtrl', function ($scope) {
        $scope.sortArray = ['name'];
        $scope.sortReverse1 = false;
        $scope.searchProperty1 = '';
        $scope.addSort = function (x) {
            if ($scope.sortArray.indexOf(x) === -1) {
                $scope.sortArray.splice(0,0,x);//add to front
            }
            else {
                $scope.sortArray.splice($scope.sortArray.indexOf(x), 1, x);//remove
                $scope.sortArray.splice(0, 0, x);//add to front again
            }
        };
        $scope.sushi = [
        { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
        { name: 'Philly', fish: 'Tuna', tastiness: 2 },
        { name: 'Tiger', fish: 'Eel', tastiness: 7 },
        { name: 'Rainbow', fish: 'Variety', tastiness: 6 },
        { name: 'Salmon', fish: 'Misc', tastiness: 2 }
        ];
    });
</script>
<table style="border: 2px solid #000;">
<thead>
    <tr>
        <td><a href="#" ng-click="addSort('name');sortReverse1=!sortReverse1">NAME<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="s in sushi | orderBy:sortArray:sortReverse1 | filter:searchProperty1">
        <td>{{ s.name }}</td>
        <td>{{ s.fish }}</td>
        <td>{{ s.tastiness }}</td>
    </tr>
</tbody>
</table>
0
Stokely