javascript - 如何排序升序降序？

Question

我是 AngularJS 的新手。我的问题是我想根据用户输入对数组进行排序。例如，如果用户输入 -rating，它应该按照评级的顺序排序，如果用户输入 -date，它应该是排序最新订单。我知道我应该使用 OrderBy 过滤器，但我无法构建该机制。非常感谢您的帮助。

这是js代码

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

这里是html代码

 <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

将 ng-model 添加到您的文本输入并在您的 orderBy 过滤器中使用此模型:

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