Order by elements based on input text, AngularJS

Question

I'm trying to order a list of items in anguarjs based on an input text, so if i write in my input "author" the list will be ordered by author

my code is this

<input type = "text" ng-model = "sort">

<ul class = "list-unstyled">
 <li ng-repeat = "comment in dishCtrl.dish.comments | orderBy: sort">
            <blockquote class = "blockquote">
               <p>{{comment.rating}} Stars </p>
               <p>{{comment.comment}}</p>
            <footer>{{comment.author}}, {{comment.date | date}</footer>
            </blockquote>
 </li>

It doesnt work, I already searched but can't find this kind of example.

Susana Mar Flores · Accepted Answer · 2016-08-15 20:04:11Z

5

You have to define the variable in the controller:

var sort = '';

Then you have to define the ng-model directive to bind the input value to this variable:

<input type="text" ng-model="dishDetailCtrl.sort">

And then you can apply the filter:

<div class="well" ng-repeat="comments in dishDetailCtrl.dish.comments | orderBy: dishDetailCtrl.sort">

answered Aug 15, 2016 at 20:04

Susana Mar Flores

2,4781 gold badge19 silver badges16 bronze badges

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

Comments

Pirate X · Accepted Answer · 2016-05-09 05:53:39Z

1

There is a very tiny mistake in your code. There should be no space after orderBy expression.

<li ng-repeat = "comment in dishCtrl.dish.comments | orderBy:sort">

~~If above doesn't work try, putting it in single quotes like 'sort'~~

edited May 9, 2016 at 5:53

answered May 8, 2016 at 14:12

Pirate X

3,1156 gold badges40 silver badges64 bronze badges

2 Comments

Antonio Kida Over a year ago

thanks, i didnt think a space would cause my program not to run correctly

Pirate X Over a year ago

I faced this space issue a lot of times. Glad to help :)

S. Divyesh · Accepted Answer · 2016-05-08 14:36:08Z

0

You need bind an action on this input it can be simple ng-enter directive or a submit button.

answered May 8, 2016 at 14:36

S. Divyesh

133 bronze badges

Comments

Elka · Accepted Answer · 2016-05-08 14:48:26Z

0

Because you are using controller as syntax, as i can see from your ng-repeat, change

<input type = "text" ng-model = "sort">

to

<input type = "text" ng-model = "dishCtrl.sort">

And also update your ng-repeat:

<li ng-repeat = "comment in dishCtrl.dish.comments | orderBy: dishCtrl.sort">

answered May 8, 2016 at 14:48

Elka

2371 silver badge9 bronze badges

1 Comment

Antonio Kida Over a year ago

Hi, it works now, thanks a lot, i tried it in that way and like the person below me said, thanks a lot

Collectives™ on Stack Overflow

Order by elements based on input text, AngularJS

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related