[英]How to sort in ascending alphabetic order and descending alphabetic order with ng repeat on button click in angularjs
我有一個下拉列表,並且有幾個div,一旦您更改了下拉列表,div就會基於json和selection創建。再次,我想基於h4標簽的值單擊第二個按鈕時按降序對div進行排序。這是代碼和更新的插件。 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';
}
}
});
要按升序/降序排序,可以在ng-repeat中使用orderBy屬性。 參考文件
謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.