繁体   English   中英

如何在angularjs中单击按钮时使用ng重复来按升序和降序排序

[英]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

HTML

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

的script.js

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM