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

Question

我是 Angular 的新手。我有一个输入文本框，我将在其中输入 "rating" 和 "date" 等排序条件。我有一个用数据定义的控制器。

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

如何定义将根据输入进行排序的过滤器？

Answer 1

你可以使用像 underscorejs 这样的集合库，它会像，

将您的输入框值绑定到一个变量，

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

在你的控制器函数中，

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

Answer 2

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 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 = "rating";

$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-重复="comment in YourControllerName.comments|orderBy: sortOption" 简而言之：如果您输入 :date，那么它会按日期排序。如果您键入 author 则它按作者排序，如果您键入 rating 则它按评级排序。

Answer 5

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

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

然后使用重复指令

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

注意orderBy和(:)NO之间的间距SPACE

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

How to sort on input text in Angular?

angularjs

angular-ui-bootstrap

bootstrap-modal