AngularJS custom order by with function

Question

How can I get the value of a input text and compare with a value of an object with an array?

When I type the property name of the comments array, has to order by this text that was typed.

For example type author order by author. I search about this, read documentation but I didn't find a solution. Can i pass a function in the order by? I try but didn't work.

I found too many example passing just one value or without the input text and I wanna pass 3 options to order, if author, rating or date, but if someone type this words in the input text.

Why doesn't work like this:

Sort by: <input type="text"  ng-model="**sortBy**">
                   <div ng-repeat="dishcomment in dishCtrl.dish.comments|filter:**sortBy**">

 var dish={
     name:'Uthapizza',
     image: 'images/uthapizza.png',
     category: 'mains', 
     label:'Hot',
     price:'4.99',
     description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
     comments: [
         {
             rating:5,
             comment:"Imagine all the eatables, living in conFusion!",
             author:"John Lemon",
             date:"2012-10-16T17:57:28.556094Z"
         },
         {
             rating:4,
             comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
             author:"Paul McVites",
             date:"2014-09-05T17:57:28.556094Z"
         },
         {
             rating:3,
             comment:"Eat it, just eat it!",
             author:"Michael Jaikishan",
             date:"2015-02-13T17:57:28.556094Z"
         },
         {
             rating:4,
             comment:"Ultimate, Reaching for the stars!",
             author:"Ringo Starry",
             date:"2013-12-02T17:57:28.556094Z"
         },
         {
             rating:2,
             comment:"It's your birthday, we're gonna party!",
             author:"25 Cent",
             date:"2011-12-02T17:57:28.556094Z"
         }
     ]
 };

 this.dish = dish;

Sort by: <input type="text"  ng-model="searchBox">
           <div ng-repeat="dishcomment in dishCtrl.dish.comments | orderBy:searchBox track by $index">
             <blockquote> 
                <p>{{dishcomment.rating}} Stars</p>
                <p>{{dishcomment.comment}}</p>
                <small>{{dishcomment.author}}
                {{dishcomment.date | date:'MMM.dd, yyyy'}}</small> 
             </blockquote>

Have you looked at this: stackoverflow.com/questions/27454658/ng-repeat-orderby-object ? — DivineTraube
– DivineTraube, Commented Nov 1, 2016 at 22:44
unless I misunderstand the question completely, this is functional as written: plnkr.co/edit/poU4KXsy9GZFeLjnnsZ6. Typing rating causes the order to change, as does typing comment or author. — Claies
– Claies, Commented Nov 1, 2016 at 22:46
It's not what a have in mind. I just wanna call a function that receive the value of the input and check if was one option order ng-repeat. — gise
– gise, Commented Nov 2, 2016 at 1:11
against which property you want to check the textbox content? — Aravind
– Aravind, Commented Nov 2, 2016 at 1:22

Sangeeta Chorage · Accepted Answer · 2016-11-02 10:42:20Z

1

You can write custom filter in angular as below :

app.filter('commentsFilter', function ($filter) {    
    return function (inputArray, orderBy) {
    var outputArray = [];

    if (order) {
        angular.forEach(inputArray, function (input) {
           if(orderBy === 'author'){
                // Sort by author logic goes here
                // Modify outputArray with sorted data
           }
          if(orderBy === 'date'){
               // Sort by date logic goes here
               // Modify outputArray with sorted data
           }                
        });
    } else {
        return inputArray;
    }
    return outputArray;
   };
});

HTML code snippet is as below

Sort by: <input type="text"  ng-model="searchBox">
       <div ng-repeat="dishcomment in dishCtrl.dish.comments | commentsFilter:searchBox track by $index">
         <blockquote> 
            <p>{{dishcomment.rating}} Stars</p>
            <p>{{dishcomment.comment}}</p>
            <small>{{dishcomment.author}}
            {{dishcomment.date | date:'MMM.dd, yyyy'}}</small> 
         </blockquote>
       </div>

answered Nov 2, 2016 at 10:42

Sangeeta Chorage

673 bronze badges

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

1 Comment

gise Over a year ago

Thanks, but I find a simple way to do that: stackoverflow.com/questions/37100705/… Just assingning a string empty solve the problem. And if I wanna a funtion works to but without ()

Maverick · Accepted Answer · 2016-11-02 09:48:33Z

0

Instead of HTML filters we can try putting filters on the controller code and update the list on ng-change of the input. This will be:

easier to understand.

Will be better for large list as the number of watchers created will be lot less than the html filters.

$scope.sortBy = function(){   
if($scope.dish.comments.hasOwnProperty($scope.sortByProp)){

    //sort the comments by the property
    $scope.dish.comments = sortedComments;

}}

Following is the HTML snippet:

<input type="text"  ng-model="sortByProp" ng-change="sortBy()">

answered Nov 2, 2016 at 9:48

Maverick

4542 silver badges11 bronze badges

1 Comment

gise Over a year ago

Thanks. I found a way to do with orderby, works without ().

Collectives™ on Stack Overflow

AngularJS custom order by with function

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related