时间戳

首页 > 解决方案 > 如何在angularjs中单击按钮上的ng重复按字母升序和字母降序排序

javascript - 如何在angularjs中单击按钮上的ng重复按字母升序和字母降序排序

问题描述

我有一个下拉列表和几个 div，一旦您更改下拉列表，div 将基于 json 和选择创建。这里一切都很好。但是一旦我选择任何选项，我想在单击第一个按钮时按升序对 div 进行排序，我想再次根据 h4 标签的值对单击第二个按钮的 div 进行降序排序。这是代码和更新的 plunker。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>

脚本.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';    
   }
   }
});

标签： javascripthtmlangularjs

解决方案

要按升序/降序排序，可以使用 ng-repeat 中的 orderBy 属性。 参考文档

谢谢

推荐阅读