The sort component allows users to select sorting criteria. The component creates a button and dropdown menu to provide sorting options.
Sort settings
bb-sort— Creates a button and dropdown menu to provide sorting options.bb-sort-item— Specifies a sorting option to include in the menu.bb-sort-item-select— Specifies a function to be called when users click the sorting option.bb-sort-item-active— (Optional.) Indicates whether the sorting option is active. (Default:false)
bb-sort-append-to-body— (Optional.) Appends the dropdown menu to the document body. To append the menu, include this attribute with no value in thebb-sortelement.
Demo
Assigned to {{item.assignee}}
Created {{item.date | date }}
{{item.note}}
Markup
<div ng-controller="SortTestController as sortCtrl">
<bb-sort
bb-sort-append-to-body>
<bb-sort-item
ng-repeat="item in sortCtrl.sortOptions"
bb-sort-item-active="sortCtrl.initialState === item.id"
bb-sort-item-select="sortCtrl.sortItems(item)">
{{item.label}}
</bb-sort-item>
</bb-sort>
<div>
<bb-repeater bb-repeater-expand-mode="none">
<bb-repeater-item ng-repeat="item in sortCtrl.sortedItems">
<bb-repeater-item-title>
{{item.title}}
</bb-repeater-item-title>
<bb-repeater-item-content>
<div class="row" style="margin-bottom: 5px;">
<div class="col-xs-6">
Assigned to {{item.assignee}}
</div>
<div class="col-xs-6">
Created {{item.date | date }}
</div>
</div>
<div class="row">
<div class="col-xs-12">
{{item.note}}
</div>
</div>
</bb-repeater-item-content>
</bb-repeater-item>
</bb-repeater>
</div>
</div>JavaScript
(function () {
'use strict';
function SortTestController() {
var self = this,
repeaterItems;
function selectItem(item) {
var result = repeaterItems.sort(function (a, b) {
var descending = item.descending ? -1 : 1,
sortProperty = item.name;
if (a[sortProperty] > b[sortProperty]) {
return (descending);
} else if (a[sortProperty] < b[sortProperty]) {
return (-1 * descending);
} else {
return 0;
}
});
self.sortedItems = repeaterItems;
}
function initSort() {
self.initialState = self.sortOptions[4].id;
selectItem(self.sortOptions[4]);
}
repeaterItems = [
{
title: 'Call Robert Hernandez',
note: 'Robert recently gave a very generous gift. We should call to thank him.',
assignee: 'Debby Fowler',
date: new Date('12/22/2015')
},
{
title: 'Send invitation to ball',
note: 'The Spring Ball is coming up soon. Let\'s get those invitations out!',
assignee: 'Debby Fowler',
date: new Date('1/1/2016')
},
{
title: 'Clean up desk',
note: 'File and organize papers.',
assignee: 'Tim Howard',
date: new Date('2/2/2016')
},
{
title: 'Investigate leads',
note: 'Check out leads for important charity event funding.',
assignee: 'Larry Williams',
date: new Date('4/5/2016')
},
{
title: 'Send thank you note',
note: 'Send a thank you note to Timothy for his donation.',
assignee: 'Catherine Hooper',
date: new Date('11/11/2015')
}
];
self.sortItems = selectItem;
self.sortOptions = [
{
id: 1,
label: 'Assigned to (A - Z)',
name: 'assignee',
descending: false
},
{
id: 2,
label: 'Assigned to (Z - A)',
name: 'assignee',
descending: true
},
{
id: 3,
label: 'Date created (newest first)',
name: 'date',
descending: true
},
{
id: 4,
label: 'Date created (oldest first)',
name: 'date',
descending: false
},
{
id: 5,
label: 'Note title (A - Z)',
name: 'title',
descending: false
},
{
id: 6,
label: 'Note title (Z - A)',
name: 'title',
descending: true
}
];
initSort();
}
angular.module('stache')
.controller('SortTestController', SortTestController);
})();