2016-04-03 10 views
0

私はAngularJSを学んでいます。私は助けてください。このアプリでは、ユーザーがオーダーの基準(著者、日付、評価)を入力できる入力フィールドを用意しています。これらには、逆順を示すために接頭辞「 - 」を付けることができます。理想は、キーワードを書くだけで、著者、日付などの異なる種類の基準にアクセスするために1つの入力フィールドしか使用できないようにすることです。orderByを使用してフィルタを使用する際に問題があります。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> 
+0

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

答えて

0

あなたはそれが間違ってやっています。入力フィールドをフィルタリングに使用できますが、ユーザーが入力したデータでデータを並べ替えるのは良い考えではありません。

ORDERBYは、順序を逆にするための第2のブールフィールドを持つ入力としてオブジェクトキーを取ります。ユーザーはオブジェクトのキーを知りません。そのため、ドロップダウンなどを利用して、利用可能なすべてのorderByオプションを提供し、内部的にorderByにオブジェクトキーを渡します。注文を元に戻すためのチェックボックスを表示することができます。 [並べ替えの詳細については

docを確認するか、このblog postを確認してください。

+0

ユーザーが入力したデータは、それが正しいか間違っているかを問わず、エクササイズの一部です。そのようにして –

+0

次に直接値をorderByに渡します。ユーザーが入力したデータがオブジェクトキーと一致した場合にのみ機能します。物事をより簡単にするためのプレースホルダとして利用可能なオプションを表示することができます。 OrderByに別の入力を使用してみてください。 – Max

関連する問題