how to order ascending descending?

Question

I am newbie about AngularJS.My problem is that I wanna sort the array according to user input.For example, if user enters -rating it should be sorted in the order of more rating, if user enters -date it should be sorted latest order.I know that I should use OrderBy filter but I could not construct the mechanism. Thnx a lot for ur helps.

here is js code

<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
    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"
            }
            ]
    };
    this.dish = dish;

here is html code

 <div class="col-xs-9 col-xs-offset-1">
        <div class="row">
            <div class="col-xs-6">
                <div>
                    <h4>Customer Comments</h4>
                </div>

            </div>
            <div class="col-xs-6">
                <div>
                    <h5>Sort by: <input type="text"></h5>
                </div>
            </div>

        </div>
        <ul class="media-list">
            <li class="media" ng-repeat="comm in dishCtrl.dish.comments ">
                <blockquote>
                    <p>{{comm.rating}}</p>
                    <p>{{comm.comment}}</p>
                    <footer>{{comm.author}} ,<cite>{{comm.date}}</cite></footer>
                </blockquote>

            </li>

        </ul>
    </div>

Answer 1

Add ng-model to your text input and use this model in your orderBy filter:

<div class="col-xs-9 col-xs-offset-1">
        <div class="row">
            <div class="col-xs-6">
                <div>
                    <h4>Customer Comments</h4>
                </div>

            </div>
            <div class="col-xs-6">
                <div>
                    <h5>Sort by: <input type="text" ng-model="sortorder"></h5>
                </div>
            </div>

        </div>
        <ul class="media-list">
            <li class="media" ng-repeat="comm in dishCtrl.dish.comments | orderBy:sortorder">
                <blockquote>
                    <p>{{comm.rating}}</p>
                    <p>{{comm.comment}}</p>
                    <footer>{{comm.author}} ,<cite>{{comm.date}}</cite></footer>
                </blockquote>

            </li>

        </ul>
    </div>