Question

我正在学习AngularJS，我需要一些帮助。在这个应用程序中，想法是有一个输入字段，使用户能够键入他们的订购标准：作者，日期和评级。这些可以带有' - '符号前缀以指示反向排序。理想情况是只能使用一个输入字段来访问不同类型的标准，只需写下关键字：作者，日期等。我在使用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]-->

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

Answer 1

你做错了。您可以使用输入字段进行过滤，但按用户输入的顺序排序数据并不是一个好主意。

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

有关订单的详细信息，请查看doc或查看此blog post。

AngularJS：使用orderBy过滤和排序

1 个答案: