2016-04-03 64 views
0

我正在學習AngularJS,我需要一些幫助。在這個應用程序的想法是有一個輸入字段,使用戶能夠輸入他們的訂購標準:作者,日期和評級。這些可以用' - '符號作爲前綴以指示反向排序。理想的是能夠只使用一個輸入字段來訪問不同類型的標準,只需編寫關鍵詞:作者,日期等。 我遇到了使用orderBy過濾器的問題。AngularJS:使用orderBy進行過濾和排序By

非常感謝!

<!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> 
+0

http://stackoverflow.com/questions/23920028/angularjs-orderby-on-ng-repeat-doesnt-work – uzaif

回答

0

你就錯了。您可以使用輸入字段進行過濾,但通過用戶輸入的數據排序並不是一個好主意。

orderBy將對象鍵作爲第二個布爾字段的輸入來顛倒順序。用戶可能不知道對象的關鍵字。所以最好提供一個下拉菜單或類似的東西來提供所有可用的orderBy選項,然後在內部將對象鍵傳遞給orderBy。可能是你可以保留一個複選框來反轉訂單。

欲瞭解更多訂購信息請查看doc或查詢此產品blog post

+0

通過用戶輸入的數據來訂購數據是練習的一部分,超越正確或錯誤我必須這樣做那麼 –

+0

然後直接將值傳遞給orderBy。只有在用戶輸入的數據與對象鍵匹配時才能使用。也許你可以顯示可用的選項作爲佔位符,使事情變得更容易。嘗試爲OrderBy使用單獨的輸入。 – Max

相關問題