javascript - Angular 下拉列表不显示第一个值

Question

我正在尝试使用列表中的第一项按“名称”排序后初始化下拉选择，如下所示:

<h2 class="presentation site is-input-header">Site</h2>
<div class="modal-select-element">
  <select ng-model="selected_site"
          ng-init="selected_site = availableSites()[0]"
          ng-options="site.name for site in availableSites() | orderBy:'name'">
  </select>
</div>

但是初始值只是随机选择的站点，而不是列表中的第一个名称。有没有办法显示排序列表中的第一项？

Answer 1

由于您已经在使用函数 availableSites() 来填充 ng-options 数据，因此我建议在函数中对数据进行排序，而不是使用 ng-options。它将具有更高的性能，并且应该可以避免您遇到的问题。

Controller :

$scope.availableSites() {
  var array = $scope.whateverMeansYouTookToGetYourDataFn();

  return array.sort(function(a,b){/* do your sorting or use lodash thats nice too */});
}

为什么？:

您看到这种副作用的原因是因为 availableSites()[0] 正在抓取未排序数组的第一项，同时 orderBy 对它们进行排序进入任何 View 顺序，不保证 availableSites()[0] 是排序后的第一个项目。

示例:

var unsortedArrayFromController = [
    {
      "name": "z"
    },
    {
      "name": "b"
    },
    {
      "name": "d"
    }
]

unsortedArrayFromController[0]

{name: z}

如果 ng-options 对此对象数组进行排序，则名称为“z”的选项仍将被选择，但现在将以不同的方式排序(假设最后一个)，因此不一定再是下拉列表中的第一项。

另外:

附注。我建议将 selected_site = availableSites()[0] 存储在与存储 availableSites() 函数相同的 Controller 中。 ng-init 指令仅在非常特殊的情况下使用，您需要为嵌套的 ng-repeat $index 局部变量添加别名。