2016-04-03 12 views
0

AngularJS'yi öğreniyorum ve biraz yardıma ihtiyacım var. Bu uygulamada fikir, kullanıcının sipariş kriterlerini yazmasını sağlayan bir giriş alanına sahip olmaktır: yazar, tarih ve derecelendirme. Bunlar ters sıralamayı belirtmek için bir '-' işareti ile ön eklenebilir. İdeal, sadece anahtar kelimeyi yazarak farklı kriterlere erişmek için sadece bir giriş alanını kullanabilmektir: yazar, tarih, vb. Filtreleri, orderBy'yi kullanarak kullanmakta sorun yaşıyorum.AngularJS: siparişi kullanarak filtreleme ve sipariş yapmaBy

Çok teşekkürler!

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

cevap

0

Bunu yanlış yapıyoruz. Filtreleme için giriş alanını kullanabilirsiniz, ancak hangi kullanıcının girdiğine göre veri siparişi vermek iyi bir fikir değildir.

orderBy, nesne anahtarını, sırayı tersine çevirmek için ikinci Boole alanı ile girdi olarak alır. Kullanıcı nesnenin anahtarını bilmiyor olabilir. Bu nedenle, tüm mevcut orderBy seçeneklerini sağlamak için bir açılır kapanma veya benzeri bir şey sağlayın ve ardından nesne anahtarını orderBy'ye geçirin. Siparişi tersine çevirmek için bir onay kutusu olabilirsiniz.

Sipariş hakkında daha fazla bilgi için doc numaralı telefonu kontrol edin veya bu blog post numaralı telefonu kontrol edin.

+0

sipariş verilerini hangi kullanıcının girdiğine göre alıştırmanın parçası, doğru ya da yanlış yapmak zorundayım bu şekilde –

+0

Ardından değeri orderBy'ye doğrudan iletin. Sadece kullanıcı tarafından girilen veri nesne tuşları ile eşleştiğinde çalışır. Olabilecek seçenekleri kolaylaştırmak için mevcut seçenekleri yer tutucu olarak gösterebilirsiniz. OrderBy için ayrı bir giriş kullanmayı deneyin. – Max

İlgili konular