Question

我是Angular的新手。我有一个输入文本框，我将输入排序标准，如＆＃34; rating＆＃34;和＆＃34;日期＆＃34;。我有一个用数据定义的控制器。

comments: [{
    rating:5,
    date:"2012-10-16T17:57:28.556094Z"
},
{
    rating:4,
    date:"2014-09-05T17:57:28.556094Z"
}]

如何定义基于输入进行排序的过滤器？

Answer 1

Working Plnkr

在此示例中，当您在输入文本字段中键入rating或date时，它将根据此值对数据进行排序。我在按键时调用了该方法。如果您想在点击sort按钮后进行排序，请添加一个按钮并在ng-click上调用他的排序方法。

var myApp = angular.module('myApp',[]);

myApp.controller('MyController',function($scope,$filter){
  $scope.test = 'This is a test!';

  $scope.comments = [
                           {
                               rating:5,
                               date:"2012-10-16T17:57:28.556094Z"
                           },
                           {
                               rating:4,
                               date:"2014-09-05T17:57:28.556094Z"
                           },
                           {
                               rating:7,
                               date:"2010-09-05T17:57:28.556094Z"
                           }]; 
  $scope.comments2 = $scope.comments;
  $scope.$watch('sortItem', function(val)
    { 

      if(val==='rating' || val==='date'){
         $scope.comments = $filter('orderBy')($scope.comments2,val);
      }
      else{
        return;
      }

    });                         

});

希望能解决你的问题。

Answer 2

您可以使用像underscorejs这样的集合库，它就像是，

将输入框值绑定到变量as，

<select ng-model=inputVal></select>

在控制器功能中

$scope.arr = _.sortBy($scope.originalArray, function(o) { 
    return o[$scope.inputVal]; 
})

Answer 3

这个过程不起作用吗？

<div ng-app ng-controller="myCtrl">
<input type="text" ng-model="sortOption" />
<ul>
  <li ng-repeat="comment in comments | orderBy: sortOption">
    rate: {{comment.rating}}
  </li>
</ul>

<强> AngularJS

$ scope.sortOption =＆＃34; rating＆＃34 ;;

$scope.comments = [
                       {
                           rating:4,
                           date:"2015-10-16T17:57:28.556094Z"
                       },
                       {
                           rating:5,
                           date:"2014-09-05T17:57:28.556094Z"
                       }
                  ]

Answer 4

在您的控制器中添加： this.sortOption ='' 在输入文本上调用上面的sortOption，如下所示： NG-模型= “sortOption” 最后修改你的ng-repeat如下： ng-repeat =“在YourControllerName.comments中的评论| orderBy：sortOption” 简而言之：如果您键入：date，则按日期排序。如果您键入作者然后按作者排序，如果您键入评级，则按排名进行排序。

Answer 5

您需要做的就是将ng-model应用于您的输入以创建不需要ng-click的绑定。一旦触摸输入字段，使用双向数据绑定，将应用过滤器：

<input type="text" ng-model="orderKey" name="orderField">

然后使用repeat指令

ng-repeat = "comment in comments | orderBy:orderKey"

注意orderBy和（:) NO SPACE

之间的间距

如何在Angular中对输入文本进行排序？

5 个答案: