CODEWITHSUNDEEP
javascriptangularjs
Antonio Kida
Antonio Kida

Reputation: 53

Order by elements based on input text, AngularJS

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.

Upvotes: 4

Views: 1728

Answers (4)

Susana Mar Flores
Susana Mar Flores

Reputation: 2478

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">

Upvotes: 5

Pirate X
Pirate X

Reputation: 3093

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'

Upvotes: 1

Elka
Elka

Reputation: 237

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">

Upvotes: 0

S. Divyesh
S. Divyesh

Reputation: 13

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

Upvotes: 0

Related Questions