Question

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

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

例如，按作者输入作者顺序。我搜索了这个，阅读文档，但我没有找到解决方案。我能按顺序传递一个功能吗？我尝试但没有工作。

我发现太多的例子只传递一个值或没有输入文本，我想传递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代码段如下

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过滤器。这将是：

更容易理解。

对于大型列表会更好，因为创建的观察者数量将远远少于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()">

AngularJS通过函数自定义顺序

2 个答案: