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 = "ment in dishCtrl.dishments | orderBy: sort">
            <blockquote class = "blockquote">
               <p>{{ment.rating}} Stars </p>
               <p>{{mentment}}</p>
            <footer>{{ment.author}}, {{ment.date | date}</footer>
            </blockquote>
 </li>

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

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 = "ment in dishCtrl.dish.ments | orderBy: sort">
            <blockquote class = "blockquote">
               <p>{{ment.rating}} Stars </p>
               <p>{{ment.ment}}</p>
            <footer>{{ment.author}}, {{ment.date | date}</footer>
            </blockquote>
 </li>

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

• javascript
• angularjs

4 Answers 4

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="ments in dishDetailCtrl.dish.ments | orderBy: dishDetailCtrl.sort">

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

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

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

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

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 = "ment in dishCtrl.dish.ments | orderBy: dishCtrl.sort">