使用 AngularJS 按字母顺序对用户输入进行排序答案

【问题标题】：Sort user input alphabetically with AngularJS使用 AngularJS 按字母顺序对用户输入进行排序
【发布时间】：2019-12-29 06:23:07
【问题描述】：

我已经构建了一个简单的基于 Bootstrap 的表单。收集到的用户输入显示在页面底部（感谢 AngularJS）：

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<body ng-app>
<form>
  <fieldset class="border rounded">
  <legend class="alert alert-info">Keywords</legend>
    <div class="form-group row" id="IT-keywords">
      <label for="keywordsIT" class="col-auto col-form-label">Five <span class="badge badge-pill badge-warning">Italian</span> keywords:</label>
      <div class="col">
        <input type="text" class="form-control" name="keywordsIT" id="keywordsIT1" ng-model="keywordsIT1">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsIT" id="keywordsIT2" ng-model="keywordsIT2">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsIT" id="keywordsIT3" ng-model="keywordsIT3">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsIT" id="keywordsIT4" ng-model="keywordsIT4">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsIT" id="keywordsIT5" ng-model="keywordsIT5">
      </div>
    </div>
    <div class="form-group row" id="EN-keywords">
      <label for="keywordsEN" class="col-auto col-form-label">Five <span class="badge badge-pill badge-warning">English</span> keywords:</label>
      <div class="col">
        <input type="text" class="form-control" name="keywordsEN" id="keywordsEN1" ng-model="keywordsEN1">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsEN" id="keywordsEN2" ng-model="keywordsEN2">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsEN" id="keywordsEN3" ng-model="keywordsEN3">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsEN" id="keywordsEN4" ng-model="keywordsEN4">
      </div>
      <div class="col">
        <input type="text" class="form-control" name="keywordsEN" id="keywordsEN5" ng-model="keywordsEN5">
      </div>
    </div>
  </fieldset>
</form>

<p>My five Italian keywords: {{keywordsIT1}}, {{keywordsIT2}}, {{keywordsIT3}}, {{keywordsIT4}}, {{keywordsIT5}}.</p>
<p>My five English keywords: {{keywordsEN1}}, {{keywordsEN2}}, {{keywordsEN3}}, {{keywordsEN4}}, {{keywordsEN5}}.</p>
</body>

我想知道是否可以在用户输入关键字之后按字母顺序对关键字列表进行排序，这样如果：

{{keywordsEN1}} = b, {{keywordsEN2}} = d, {{keywordsEN3}} = a, {{keywordsEN4}} = e, {{keywordsEN5}} = c

结果是：

a、b、c、d、e。

任何帮助将不胜感激。谢谢大家。

【问题讨论】：

标签： javascript angularjs sorting angularjs-orderby

【解决方案1】：

我建议您改用数组，因为它们更容易处理。这样，您需要做的就是sort 数组，然后join 数组中的元素与,。我在排序之前使用filter 过滤掉所有null 或undefined 值，以便将它们省略。使用localeCompare 并在sort 期间将您的字符串转换为小写，这样即使您的输入中有大写字母，它也能正常工作。

此外，由于意大利语单词包含重音符号/变音符号（例如 è 或 ò），因此您需要在对数组进行排序之前对输入进行规范化。

这是一个工作示例。

angular.module('app', [])
  .controller('ctrl', ['$scope', ($scope) => {
    $scope.keywordsIT = new Array(5);
    $scope.keywordsEN = new Array(5);

    $scope.sortKeywordsIT = function() {
      return $scope.keywordsIT
        .filter(keyword => !!keyword)
        .map(keyword => keyword.normalize("NFD"))
        .sort((k1, k2) => k1.toLowerCase().localeCompare(k2.toLowerCase()))
        .join(', ');
    }

    $scope.sortKeywordsEN = function() {
      return $scope.keywordsEN
        .filter(keyword => !!keyword)
        .sort((k1, k2) => k1.toLowerCase().localeCompare(k2.toLowerCase()))
        .join(', ');
    }
  }]);

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<body ng-app="app" ng-controller="ctrl">
  <form>
    <fieldset class="border rounded">
      <legend class="alert alert-info">Keywords</legend>
      <div class="form-group row" id="IT-keywords">
        <label for="keywordsIT" class="col-auto col-form-label">Five <span class="badge badge-pill badge-warning">Italian</span> keywords:</label>
        <div class="col">
          <input type="text" class="form-control" name="keywordsIT" id="keywordsIT1" ng-model="keywordsIT[0]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsIT" id="keywordsIT2" ng-model="keywordsIT[1]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsIT" id="keywordsIT3" ng-model="keywordsIT[2]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsIT" id="keywordsIT4" ng-model="keywordsIT[3]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsIT" id="keywordsIT5" ng-model="keywordsIT[4]">
        </div>
      </div>
      <div class="form-group row" id="EN-keywords">
        <label for="keywordsEN" class="col-auto col-form-label">Five <span class="badge badge-pill badge-warning">English</span> keywords:</label>
        <div class="col">
          <input type="text" class="form-control" name="keywordsEN" id="keywordsEN1" ng-model="keywordsEN[0]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsEN" id="keywordsEN2" ng-model="keywordsEN[1]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsEN" id="keywordsEN3" ng-model="keywordsEN[2]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsEN" id="keywordsEN4" ng-model="keywordsEN[3]">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="keywordsEN" id="keywordsEN5" ng-model="keywordsEN[4]">
        </div>
      </div>
    </fieldset>
  </form>
  <p>My five Italian keywords: {{sortKeywordsIT()}}.</p>
  <p>My five English keywords: {{sortKeywordsEN()}}.</p>
</body>

【讨论】：

非常感谢@nash11！您的解决方案效果很好，但这种方法的缺点是 .sort() 方法区分大小写。因此，如果您输入：{{keywordsEN1}} = New York、{{keywordsEN2}} = city、{{keywordsEN3}} = town、{{keywordsEN4}} = United States、{{keywordsEN5}} = America，结果将是：America、New York、United States、city、@9876543444那么注入orderBy 过滤器inside the controller 怎么样？我自己无法正确修改您的代码...
@Gianluca - 我已经编辑了我的答案，以便通过在比较它们之前将字符串转换为小写来进行排序。这应该适合你:)
现在它就像一个魅力，谢谢！ :-) 仅作记录，我最终设法使用orderBy 方法修改了您的第一个代码；从风格的角度来看，我不确定它是否“干净”，但是……它也可以！ ;-)
angular.module('app', []) .controller('ctrl', ['$scope', 'orderByFilter', function($scope, orderBy) { $scope.keywordsIT = new Array(5); $scope.keywordsEN = new Array(5); $scope.sortKeywordsIT = function() { return orderBy($scope.keywordsIT).filter(keyword => !!keyword).map(keyword => keyword.normalize("NFD")).join(', '); } $scope.sortKeywordsEN = function() { return orderBy($scope.keywordsEN).filter(keyword => !!keyword).map(keyword => keyword).join(', '); } }]);
@Gianluca - 虽然这可能适用于英语、意大利语，但如果您使用重音符号（例如 à），它将无法使用您使用 orderBy 提供的代码正确排序 :)