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

Tips for managing a 64-bit signed integer received from a NextJS backend API

Fetch a single random profile image from a Facebook user's list of friends using Javascript

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

Executing a pair of queries within the same table and integrating them within a unified route

Error: Attempted to access undefined property 'renderMenu' in a promise without handling it

What makes arrays declared as "char word[5] = "hello" flexible in comparison to strings declared as a pointer (char *word = "hello")?

Tips for migrating an AngularJS application to Angular

Rapid processing of JavaScript upon page load

The Jquery flot plugin is failing to plot the graph accurately based on the specified date

When utilizing row.add in AngularJS and jQuery DataTables, the ng-click function may not function as expected

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

The webpage is missing a rendered React component even though it should be displayed

An unexpected error has occurred within React Native, indicating that an object is

Is it possible to utilize the same Context in multiple forms within React?

Issues encountered when trying to install Angular 2 packages through npm in Visual Studio 2015 Update 2

Regex substitute every instance of the phrase CONTAINED within brackets

Tips for creating animations with multiple elements that share the same classes

Obtaining the Div ID After Clicking on a Link

What sets returning a promise from async or a regular function apart?

Implementing HTML content inside an el-select component in Vue.js using Element UI