Custom Sorting in AngularJs

Question

I have JSON field like

    {"facebook":"[email protected]",
            "homeAddress":"26, New Street, Blr",
            "officeAddress":"31, Old Office Street, Blr",
            "city":"Blr",
name:"aravind"
    },
    {"facebook":"[email protected]",
            "homeAddress":"26, New Street, che",
            "officeAddress":"31, Old Office Street, che",
            "city":"che",
name:"ashok"
    }

In Angular js, I have ordered the field by name defaultly, I have one text box and button

<input type="text" class="form-control" ng-model="search.location" />
          <div class="search" ng-click="locationSorting()"></div>

When i click the button after enter the location in text box( For Ex: blr). The list is sorted by location.

Currently i have finishing the filter by location. But i dont want filtering. I want sorting the list

 var locationFilterHome = {homeAddress: location};
        filterData = $filter('filter')(data, locationFilterOffice)

I am using above code for filtering. How to do sorting based on location

If you enter blr as location , then output should be like first display all records which contain blr as city!! And then all records in ascending/descending order of city's name?? Or am i understanding wrong?? — Shivali Patel
– Shivali Patel, Commented Nov 12, 2014 at 4:18
Normally it is arranged by name like android phone contacts. When i enter the city. It will rearrange by city — Mohaideen Ismail
– Mohaideen Ismail, Commented Nov 12, 2014 at 4:24

jitin · Accepted Answer · 2014-11-12 04:28:34Z

1

From what I understand, you wish to ask how to sort the data by location in the controller. One way would be to use the 'orderBy' filter. You can use it just like you use the 'filter' filter: filterData=$filter('orderBy')(data,'location');

Please check out this plunk for an example of what I am trying to say: http://plnkr.co/edit/BU4DaxlBSNcmRkXG6krc?p=preview

angular.module('app',[])
  .controller('mainCtrl',function($filter){
var data=[{"facebook":"[email protected]",
                "homeAddress":"26, New Street, Blr",
                "officeAddress":"31, Old Office Street, Blr",
                "city":"Zlr",
    name:"aravind"
        },
        {"facebook":"[email protected]",
                "homeAddress":"26, New Street, che",
                "officeAddress":"31, Old Office Street, che",
                "city":"che",
    name:"ashok"
        }];

    var modifiedData=$filter('orderBy')(data,'city');
    console.log(modifiedData);
  })

edited Nov 12, 2014 at 4:28

answered Nov 12, 2014 at 4:13

jitin

7328 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ajmajmajma Over a year ago

I don't think you can use orderBy for objects, no?

Mohaideen Ismail Over a year ago

I can't see your output in plunker

jitin Over a year ago

You have to look at the console since I have done a console.log for the sorted data. Are you unable to get the data in the console?

Mohaideen Ismail Over a year ago

Ya Its coming. My aim is. Normally it is ordered by name(A-Z).. When i enter the city in text box(Ex:blr). So Blr field comes first others go down

Shivali Patel · Accepted Answer · 2014-11-12 04:52:28Z

Your can create filter like this way!!

`bizBrainCommon.filter('test', function () { return function (items, field, sortingValue) { var filtered = [];

    if(!field || !sortingValue)
        return items;

    angular.forEach(items, function (item) {
        filtered.push(item);
    });


    filtered.sort(function (a, b) {

        var upA = a[field].toUpperCase();

        if (upA > sortingValue.toUpperCase() || upA < sortingValue.toUpperCase()) return 1;

        if (upA == sortingValue.toUpperCase())
            return -1;
    });

    return filtered;
};

});`

HTML will be like:

ng-repeat="(id, user) in users |test:'fName': search"

Hope this will help you!!

Collectives™ on Stack Overflow

Custom Sorting in AngularJs

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related