Customizing order and limit features in AngularJS

Question

Customizing order and limit features in AngularJS

I have a collection of items that I need to organize into separate lists based on priority levels.

items = [
    {'type': 2, 'priority': 1, 'name': 'one'},
    {'type': 1, 'priority': 2, 'name': 'two'},
    {'type': 1, 'priority': 3, 'name': 'three'},
    {'type': 1, 'priority': 4, 'name': 'four'},
    {'type': 1, 'priority': 5, 'name': 'five'},
    {'type': 2, 'priority': 6, 'name': 'six'},
]

Using ng-repeat, I want to sort these items by priority and group them by type. Each list should have a maximum sum of 4 for the type values. The final output should be as follows (sorted by name)

['one', 'two', 'three', 'four']
['five', 'six']

javascript arrays angularjs sorting

Answer 1

Answer №1

To implement sorting and grouping in JavaScript, leverage the power of Underscorejs as shown below:

var sortedItems = _.chain(items).sortBy('priority').groupBy('type').value();

You can then easily iterate over the new array using ng-repeat directive.

UPDATE: Check out the working example on jsfiddle: http://jsfiddle.net/abcd1234/

Answer 2

To implement sorting and grouping in JavaScript, leverage the power of Underscorejs as shown below:

var sortedItems = _.chain(items).sortBy('priority').groupBy('type').value();

You can then easily iterate over the new array using ng-repeat directive.

UPDATE: Check out the working example on jsfiddle: http://jsfiddle.net/abcd1234/

Answer 3

Answer №2

Utilizing a specialized Angular filter, you have the ability to easily filter your ng-repeat as demonstrated below or on this jsfiddle.

Instead of utilizing a forEach loop, another option would be to implement a lodash or underscore method (such as groupBy('type').

Angular filters also provide an alternative approach, as showcased in this jsfiddle, eliminating the need for a custom filter.

angular.module('demoApp', [])
    .filter('filterByType', TypeFilter)
    .value('MAX_ITEMS', 4) 
    .controller('mainController', MainController);

function TypeFilter($filter, MAX_ITEMS) {
    return function(input, selectedType) {
        var out = [], count=0,
            ordered = $filter('orderBy')(input, 'priority');
        //console.log("filter start", ordered);
        
        angular.forEach(ordered, function(obj, index) {
            if ( obj.type == selectedType.type && 
                count < MAX_ITEMS ) {
                out.push(obj);
                count++;
            }
        });
        //console.log(out);
        return out;
    }
}

TypeFilter.$inject = ['$filter', 'MAX_ITEMS'];

function MainController() {
    
    this.filterTypes = [
            {type: 1},
            {type: 2}
        ];
    this.type =  this.filterTypes[0];
    this.items = [
        {'type': 2, 'priority': 1, 'name': 'one'},
        {'type': 1, 'priority': 2, 'name': 'two'},
        {'type': 1, 'priority': 3, 'name': 'three'},
        {'type': 1, 'priority': 4, 'name': 'four'},
        {'type': 1, 'priority': 5, 'name': 'five'},
        {'type': 2, 'priority': 6, 'name': 'six'},
    ];
     
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
    Filter by type:
    <select ng-model="ctrl.type" ng-options="opt.type for opt in ctrl.filterTypes"></select>
    <p>selected type: {{ctrl.type.type}}</p>
    <ul>
        <li ng-repeat="item in ctrl.items |filterByType:ctrl.type">
            {{item.name}}
        </li> 
    </ul>
</div>

Answer 4

Utilizing a specialized Angular filter, you have the ability to easily filter your ng-repeat as demonstrated below or on this jsfiddle.

Instead of utilizing a forEach loop, another option would be to implement a lodash or underscore method (such as groupBy('type').

Angular filters also provide an alternative approach, as showcased in this jsfiddle, eliminating the need for a custom filter.

angular.module('demoApp', [])
    .filter('filterByType', TypeFilter)
    .value('MAX_ITEMS', 4) 
    .controller('mainController', MainController);

function TypeFilter($filter, MAX_ITEMS) {
    return function(input, selectedType) {
        var out = [], count=0,
            ordered = $filter('orderBy')(input, 'priority');
        //console.log("filter start", ordered);
        
        angular.forEach(ordered, function(obj, index) {
            if ( obj.type == selectedType.type && 
                count < MAX_ITEMS ) {
                out.push(obj);
                count++;
            }
        });
        //console.log(out);
        return out;
    }
}

TypeFilter.$inject = ['$filter', 'MAX_ITEMS'];

function MainController() {
    
    this.filterTypes = [
            {type: 1},
            {type: 2}
        ];
    this.type =  this.filterTypes[0];
    this.items = [
        {'type': 2, 'priority': 1, 'name': 'one'},
        {'type': 1, 'priority': 2, 'name': 'two'},
        {'type': 1, 'priority': 3, 'name': 'three'},
        {'type': 1, 'priority': 4, 'name': 'four'},
        {'type': 1, 'priority': 5, 'name': 'five'},
        {'type': 2, 'priority': 6, 'name': 'six'},
    ];
     
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
    Filter by type:
    <select ng-model="ctrl.type" ng-options="opt.type for opt in ctrl.filterTypes"></select>
    <p>selected type: {{ctrl.type.type}}</p>
    <ul>
        <li ng-repeat="item in ctrl.items |filterByType:ctrl.type">
            {{item.name}}
        </li> 
    </ul>
</div>

Customizing order and limit features in AngularJS

Answer №1

Answer №2

Similar questions

What is the reason behind Angular not allowing users to define @Output events that begin with 'on'?

Increase the number of key-value pairs within the elements of an array using PHP

Having trouble with Vue's $route.push method not working when invoked from a method?

What is the best way to send a POST request with parameters to a PHP backend using AJAX?

Is it possible to retrieve specific elements from another html file using AJAX?

Load elements beforehand without displaying them using a div

Issue with rendering Base64 image array strings in FlatList component in React Native

JQuery UI autocomplete vanishes instantly without any warning

"PHP, AJAX, and JavaScript work together to run a loop that processes only the final element

Utilizing MongoDb and Node.js for efficient data input

When a user clicks on a child element in ReactJS, the onclick event returns as undefined

highlight the selected option in the ng-repeat list of items

NodeJS CORS functionality failing to function properly in the Google Chrome browser

Exploring the Difference Between $onChanges and $onInit in Angular Components

How to use AngularJS to collapse various panels with unique content

Make this array output from PHP easier to understand by simplifying it

Monitoring Clicks within an Iframe

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

Using Jquery and css to toggle and display active menu when clicked

The interval keeps resetting every time I want the initial one to expire first