I have a dropdown and few divs,once you change the dropdown, divs will create based on json and selection.Here every thing is fine.But once I select any option,I want to sort the divs on ascending order on click of first button, again I want to sort the divs on descending order on click of second button based on h4 tag's value.Here is the code and updated plunker. https://plnkr.co/edit/XEzYi1JEeOtvqC6xn9jZ?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="technology">technology</option>
<option value="vertical">vertical</option>
</select>
<div><button>Sort-ascending alphabetical order</button></div>
<div><button>Sort-descending alphabetical order</button></div>
<div ng-repeat="(key, value) in players | groupBy: attr" ng-attr-id="{{key}}">
<h4>Group name: {{ key }}{{value.length}}</h4>
<p ng-repeat="player in value">
player: {{ player.name }}
</p>
</div>
</div>
var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.players = [
{
name: 'projectjava',
symptom:'fever',
technology:'java',
vertical:'insurance',
id:'1'
},
{
name: 'projecttabulue',
symptom:'diesease',
technology:'tabulue',
vertical:'Banking',
id:'3'
},
{
name: 'projectpython1',
symptom:'diesease',
technology:'python',
vertical:'Health care',
id:'3'
},
{
name: 'projectpython2',
symptom:'colds',
technology:'python',
vertical:'Banking',
id:'2'
}
];
$scope.update = function() {
if($scope.x == 'technology'){
$scope.id='technology';
$scope.attr = 'technology';
}
if($scope.x == 'vertical'){
$scope.id='vertical';
$scope.attr = 'vertical';
}
}
});
To sort by ascending/descending order, you can use orderBy property in ng-repeat. Reference Docs
Thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.