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

詹卢卡

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

任何帮助将不胜感激。谢谢你们。

纳什11

我建议您改用数组，因为它们更容易处理。这样，您需要做的就是sort数组，然后数组中join的元素带有,. 我使用在排序之前filter过滤掉所有的nullorundefined值，以便省略它们。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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。