Сортировка массива Alphabetically- Angularjs

Question

У меня есть результат, показывающий здесь

<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> 

У меня есть выпадающий список выбора. Я должен иметь возможность сортировать мой результат alphabetally после того, как я выбираю «Alphabetical» вариант

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

Изначально я поставил OrderBy: «название». но это должно произойти после выбора выпадающего списка. как добиться этого?

Answer 1

Очень просто ..

Вы хотите отсортировать в алфавитном порядке .. значит, и есть передать значение как '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'. То есть, где происходит сортировка

Answer 2

Вы можете попробовать это:

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

Answer 3

<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> 

Answer 4

Это лучше, если вы делаете фильтрацию и сортировку в 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() для сортировки массивов

Answer 5

Попробуйте так:

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>