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

【问题标题】：How to sort on input text in Angular?如何对Angular中的输入文本进行排序？
【发布时间】：2017-12-07 07:31:56
【问题描述】：

我是 Angular 的新手。我有一个输入文本框，我将在其中输入排序标准，如“评级”和“日期”。我有一个用数据定义的控制器。

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

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

【问题讨论】：

标签： angularjs angular-ui-bootstrap bootstrap-modal

【解决方案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;
      }

    });                         

});

希望能解决您的问题。

【讨论】：

我正在添加一个额外的作品来处理降序。 else if (val === '-rating' || val === '-date') { $scope.cmets = $filter('orderBy')($scope.cmets2, val, reverse);这没有用。如果我错了你能纠正我吗
其实。我找到了。它按 $scope.cmets = $filter('orderBy')($scope.cmets2, val) 排序

【解决方案2】：

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

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

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

在你的控制器函数中，

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

【讨论】：

【解决方案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 = "评分";

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

【讨论】：

【解决方案4】：

在您的控制器中添加以下内容： this.sortOption = ''

在您的输入文本上调用上面的 sortOption，如下所示： ng-model="sortOption"

最后修改你的 ng-repeat 如下：

ng-repeat="YourControllerName.cmets 中的注释|orderBy: sortOption" 简而言之：如果你输入 :date 然后它按日期排序。如果输入作者，则按作者排序，如果输入等级，则按等级排序。

【讨论】：

【解决方案5】：

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

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

然后使用重复指令

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

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

【讨论】：