AngularJS通过函数自定义排序

Question

如何获取输入文本的值并与带有数组的对象的值进行比较？

当我输入 cmets 数组的属性名称时，必须按输入的文本排序。

例如按作者键入作者顺序。 我对此进行了搜索，阅读了文档，但没有找到解决方案。 我可以按顺序传递一个函数吗？我尝试了，但没有成功。

我发现太多示例只传递一个值或不传递输入文本，我想传递 3 个选项来订购，如果作者、评级或日期，但如果有人在输入文本中键入此词。

为什么不能这样工作：

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

你可以用下面的角度编写自定义过滤器：

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代码sn-p如下

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>    

Answer 2

我们可以尝试将过滤器放在控制器代码上，并在输入的 ng-change 上更新列表，而不是 HTML 过滤器。 这将是：

1. 更容易理解。

2. 对于大型列表会更好，因为创建的观察者数量将比 html 过滤器少得多。

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

以下是 HTML sn-p:

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