按字母顺序排序数组 - Angularjs答案

【问题标题】：Sort array Alphabetically- Angularjs按字母顺序排序数组 - Angularjs
【发布时间】：2017-05-18 08:02:06
【问题描述】：

我的结果显示在这里

<div ng-repeat="o in vm.gridOptions.data | filter:filt | oderBy : 'title'">
    <span>{{o.title}}</span>
</div>

显示

<div ng-repeat="o in vm.gridOptions.data">
    <span>aaa</span>
    <span>ggg</span>
    <span>ccc</span>
    <span>bbb</span>
</div>

我有一个选择下拉菜单。选择“Alphabetical”选项后，我应该能够按字母顺序对结果进行排序

<select ng-model="filt">
    <option value="-1">vsf</option>
    <option>Alphabetical</option>
    <option>sccc</option>                                    
</select>

最初我放了 orderBy:'title'。但这应该在我选择下拉菜单后发生。如何做到这一点？

【问题讨论】：

Alphabetical 是您数组的任何列吗？
不...按字母顺序只是选择下拉列表中的一个选项..
@Matarishvan 你检查我的答案了吗？

标签： javascript angularjs filter angular-ngmodel angular-filters

【解决方案1】：

你可以试试这个：

<div ng-repeat="o in vm.gridOptions.data | filter:filt | oderBy : filt?'title':''">

【讨论】：

【解决方案2】：

<select ng-model="filt">
  <option>Alphabetical</option>
  <option>k</option>
</select>
<p ng-if="filte=(filt=='Alphabetical')?'':'o.title' "></p>
<div ng-repeat="o in vm.gridOptions.data | orderBy: filte">
<span>{{o.title}}</span>

【讨论】：

【解决方案3】：

最好在controller中进行过滤和排序。您可以根据需要更改Array.prototype.sort() 功能

控制器

$scope.data=[{
    "title" : "gggg"
},{
    "title" : "cccc"
},{
    "title" : "zzzz"
},{
    "title" : "aaaa"
}];
$scope.sortvalue = "None";

$scope.changeSortOrder = function()
{
  if($scope.sortvalue == "Alphabetically")
  {
    $scope.data.sort(function(a, b){
      if(a.title < b.title) return -1;
      if(a.title > b.title) return 1;
      return 0;
    });
  }
}

HTML

<div ng-controller="myCtrl">
    <div ng-repeat="o in data">
      <span>{{o.title}}</span>
    </div>
    <div>
     <select ng-model="sortvalue" ng-change="changeSortOrder()">
      <option value="None">Select an option</option>
      <option value="Alphabetically">Alphabetically</option>
     </select>
    </div>
  </div>

FULL EXAMPLE

Here 是使用Array.prototype.sort() 对数组进行排序的示例列表

【讨论】：

【解决方案4】：

试试这个方法：

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

myApp.controller('MyCtrl',function($scope) {
    $scope.data = [{
        "title" : "aaa"
    },{
        "title" : "ggg"
    },{
        "title" : "ccc"
    },{
        "title" : "bbb"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="filt">
    <option value="-1">vsf</option>
    <option value="title">Alphabetical</option>
    <option>sccc</option>                                    
  </select>
  <div ng-repeat="o in data | orderBy:filt">
   {{o.title}}
</div>

【讨论】：

【解决方案5】：

很简单..

您想按字母顺序排序.. 意味着您必须将值作为'title' 传递给您的选项'Alphabetical'。因为根据“标题”，结果会排序

<select ng-model="filt">
    <option value="-1">vsf</option>
    <option value="title">Alphabetical</option>
    <option>sccc</option>                                    
</select>

然后在你的 div 中

<div ng-repeat="o in vm.gridOptions.data | orderBy:filt">

orderBy: filt 只会为您的option value='title' 执行。这就是排序发生的地方

【讨论】：