Javascript AngularJS：使用orderBy进行过滤和排序_Javascript_Angularjs_Filter

Javascript AngularJS：使用orderBy进行过滤和排序

javascript angularjs filter

Javascript AngularJS：使用orderBy进行过滤和排序,javascript,angularjs,filter,Javascript,Angularjs,Filter,我正在学习AngularJS，我需要一些帮助。在这个应用程序中，想法是有一个输入字段，允许用户输入他们的排序标准：作者、日期和评级。这些可以加上前缀“-”符号以表示反向排序。理想的情况是，只需编写关键字：author、date等，就可以使用一个输入字段访问不同类型的标准。我在使用orderBy时遇到问题非常感谢 <!DOCTYPE html> <html ng-app="confusionApp" lang="en"><head> <meta htt

我正在学习AngularJS，我需要一些帮助。在这个应用程序中，想法是有一个输入字段，允许用户输入他们的排序标准：作者、日期和评级。这些可以加上前缀“-”符号以表示反向排序。理想的情况是，只需编写关键字：author、date等，就可以使用一个输入字段访问不同类型的标准。我在使用orderBy时遇到问题

非常感谢

<!DOCTYPE html>
<html ng-app="confusionApp" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
     content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
    <!-- Bootstrap -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


Ristorante Con Fusion：菜单




{{MenuController.dish.category}


{{MenuController.dish.name}
{{MenuController.dish.label}
{{MenuController.dish.price | currency}}
{{MenuController.dish.description}}
客户评论按排序
星星：{{commentControll.rating}
{{commentControll.comment}
{{commentControll.author}，{{commentControll.date | date:'medium'}
var-app=angular.module（'confusionApp'，[]）；
app.controller（'dishdailcontroller'，function（）{
真空皿={
名称：'Uthapizza'，
图片：“images/uthapizza.png”，
类别：'干线'，
标签：'热'，
价格：'4.99'，
描述：“一种独特的印度乌萨帕姆（煎饼）和意大利比萨饼组合，顶部有樱桃橄榄、成熟的葡萄藤樱桃西红柿、维达利亚洋葱、甘特辣椒和水牛肉饼。”，
评论：[
{
评级：5，
评论：“想象一下所有的食物，生活在混乱中！”，
作者：“约翰·莱蒙”，
日期：“2012-10-16T17:57:28.556094Z”
},
{
评级：4，
评论：“把任何人送到天堂，我希望我能让我岳母吃！”，
作者：“Paul McVites”，
日期：“2014-09-05T17:57:28.556094Z”
},
{
评级：3，
评论：“吃吧，就吃吧！”，
作者：“迈克尔·贾基尚”，
日期：“2015-02-13T17:57:28.556094Z”
},
{
评级：4，
评论：“终极，追求星空！”，
作者：“林戈·斯塔里”，
日期：“2013-12-02T17:57:28.556094Z”
},
{
评级：2，
评论：“今天是你的生日，我们要开派对！”，
作者：“25分”，
日期：“2011-12-02T17:57:28.556094Z”
}
]
};
这道菜=这道菜；
});

你做错了。您可以使用输入字段进行筛选，但按用户输入的内容对数据进行排序不是一个好主意

orderBy将对象键作为输入，并使用第二个布尔字段反转顺序。用户可能不知道对象的密钥。因此，最好提供一个下拉列表或类似的内容来提供所有可用的orderBy选项，然后在内部将对象键传递给orderBy。可能您可以保留一个复选框，用于撤销订单

有关orderBy的更多信息，请选中或选中此项。

根据用户输入的订单数据这是练习的一部分，除了正确或错误之外，我必须以这种方式进行操作，然后直接将值传递给orderBy。只有当用户输入的数据与对象键匹配时，它才会工作。可能您可以将可用选项显示为占位符，以使事情更简单。尝试为OrderBy使用单独的输入。

<body>

<div class="container">
    <div class="row row-content" ng-controller="dishDetailController as MenuController">

        <div class="col-xs-12">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation">
                  <h3>{{MenuController.dish.category}}</h3>
                </li>
            </ul>
            <div class="media-body">
                <div class="media-left">
                    <img class="media-object img-thumbnail" ng-src={{MenuController.dish.image}} alt="Uthappizza">
                </div> 
                <div class="media-body">   
                    <h2 class="media-heading">{{MenuController.dish.name}}
                    <span class="label label-danger">{{MenuController.dish.label}}</span>
                    <span class="badge">{{MenuController.dish.price | currency}}</span>
                    <p>{{MenuController.dish.description}}</p>
                </div>
            </div>
                <div class="col-xs-9 col-xs-offset-1">
                  <p><strong>Customer Comments</strong>    Sort by <input type="text" data-ng-model="searchCustom"  ></p>
                  <div ng-repeat=" commentControll in MenuController.dish.comments | filter:searchCustom | orderBy: 'HERE THE PROBLEM' ">
                      <blockquote>
                          <p>Stars: {{commentControll.rating}}</p>
                          <p>{{commentControll.comment}}</p>
                          <footer>{{commentControll.author}}, {{ commentControll.date | date:'medium'}}</footer>
                      </blockquote>
                  </div> 
                </div>
        </div>

    </div>
</div>

<script src="../bower_components/angular/angular.min.js"></script>

<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"
                           },
                           {
                               rating:4,
                               comment:"Ultimate, Reaching for the stars!",
                               author:"Ringo Starry",
                               date:"2013-12-02T17:57:28.556094Z"
                           },
                           {
                               rating:2,
                               comment:"It's your birthday, we're gonna party!",
                               author:"25 Cent",
                               date:"2011-12-02T17:57:28.556094Z"
                           }

                       ]
                };

        this.dish = dish;

    });

</script>




</body></html>