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

Question

我构建了一个简单的基于 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。

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

Answer 1

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

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

这是一个工作示例。

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>

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

Sort user input alphabetically with AngularJS

javascript

sorting

angularjs

angularjs-orderby