AngularJS by order by function

Question

入力テキストの値を取得し、配列を持つオブジェクトの値と比較するにはどうすればよいですか？

コメント配列のプロパティ名を入力するとき、入力されたこのテキストで注文する必要があります。

たとえば、著者によるオーダーオーダーを入力します。 これについて検索し、ドキュメントを読んでいますが、解決策が見つかりませんでした。 関数をその順序で渡すことはできますか？私は試してみましたが、動かなかったのです

私はあまりにも多くの例が1つの値を渡すか、入力テキストなしで見つかりました。著者、評価または日付の場合は3つのオプションを渡しますが、入力テキストにこの単語を入力するとします。

なぜ、このように動作しません。代わりにHTMLフィルタの

Sort by: <input type="text" ng-model="**sortBy**"> 
        <div ng-repeat="dishcomment in dishCtrl.dish.comments|filter:**sortBy**"> 

---

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; 

Sort by: <input type="text" ng-model="searchBox"> 
      <div ng-repeat="dishcomment in dishCtrl.dish.comments | orderBy:searchBox track by $index"> 
      <blockquote> 
       <p>{{dishcomment.rating}} Stars</p> 
       <p>{{dishcomment.comment}}</p> 
       <small>{{dishcomment.author}} 
       {{dishcomment.date | date:'MMM.dd, yyyy'}}</small> 
      </blockquote> 

Answer 1

我々は、コントローラコードにフィルタを入れて試してみてng-のリストを更新することができます入力の変更。 これは次のようになります。

1. わかりやすい。

2. 作成されたウォッチャーの数がhtmlフィルタよりもずっと少ないため、大きなリストの方が良いでしょう。

   $scope.sortBy = function(){ 
   if($scope.dish.comments.hasOwnProperty($scope.sortByProp)){ 
   
       //sort the comments by the property 
       $scope.dish.comments = sortedComments; 
   
   }} 
   

次のHTMLスニペットです：

<input type="text" ng-model="sortByProp" ng-change="sortBy()"> 

Answer 2

あなたは、以下のような角度でカスタムフィルタを書くことができます。

app.filter('commentsFilter', function ($filter) {  
    return function (inputArray, orderBy) { 
    var outputArray = []; 

    if (order) { 
     angular.forEach(inputArray, function (input) { 
      if(orderBy === 'author'){ 
       // Sort by author logic goes here 
       // Modify outputArray with sorted data 
      } 
      if(orderBy === 'date'){ 
       // Sort by date logic goes here 
       // Modify outputArray with sorted data 
      }     
     }); 
    } else { 
     return inputArray; 
    } 
    return outputArray; 
    }; 
}); 

HTMLコードスニペットが

Sort by: <input type="text" ng-model="searchBox"> 
     <div ng-repeat="dishcomment in dishCtrl.dish.comments | commentsFilter:searchBox track by $index"> 
     <blockquote> 
      <p>{{dishcomment.rating}} Stars</p> 
      <p>{{dishcomment.comment}}</p> 
      <small>{{dishcomment.author}} 
      {{dishcomment.date | date:'MMM.dd, yyyy'}}</small> 
     </blockquote> 
     </div>  

以下の通りです