Question

我有一个从对象数组中填充的选择菜单：

$scope.regionMenu = [
    {
      label: 'Show All',
      value: ''
    },
    {
      label: 'EU',
      value: 'Europe'
    },
    {
      label: 'Dest via Air US OB',
      value: 'Dest via Air US OB'
    },
    {
      label: 'Dest via Air UK OB',
      value: 'Dest via Air UK OB'
    },
    {
      label: 'Supplements',
      value: 'Supplements'
    },
    {
      label: 'Used Items',
      value: 'Used Items'
    },
    {
      label: 'YOIHIMBE',
      value: 'YOIHIMBE'
    }
  ];

菜单本身：

<select ng-model="regionFilter.region" ng-options="s.value as s.label for s in regionMenu track by s.value"></select>

但由于某种原因，我无法弄清楚，我在顶部有一个空白的菜单项，并且＃34;显示所有＆＃34;在那里两次：

为什么会这样？

UPDATE 在html中生成的代码：

<select ng-model="regionFilter.region" ng-options="s.value as s.label for s in regionMenu track by s.value" class="form-control input-xs ng-pristine ng-valid ng-touched" xxx-ng-change="updateRegion()">
<option value="?" selected="selected"></option>
<option label="Show All" value="">Show All</option>
<option label="Show All" value="">Show All</option>
<option label="EU" value="Europe">EU</option>
<option label="Dest via Air US OB" value="Dest via Air US OB">Dest via Air US OB</option>
<option label="Dest via Air UK OB" value="Dest via Air UK OB">Dest via Air UK OB</option>
<option label="Supplements" value="Supplements">Supplements</option>
<option label="Used Items" value="Used Items">Used Items</option>
<option label="YOIHIMBE" value="YOIHIMBE">YOIHIMBE</option>

更新2

我们通过这种方式进行过滤，同时拥有文本字段和菜单过滤器：

<input type="text" id="countrySearch" placeholder="Country" ng-model="regionFilter.$" size="15">

Answer 1

关于Track By

的AngularJS文档中的

Here

如果您确实需要重复重复项目，则可以使用跟踪表达式替换默认跟踪行为。

这是因为您正在使用track by并关联它的价值，但它的标签似乎是识别您的菜单的标签。

这是一个例子 https://jsfiddle.net/nhkk98qf/2/

Answer 2

根据我的经验，这是因为将Bootstrap JS包含在您的应用中。删除Bootstrap，你将删除你的副本。此外，空白选项由Angular创建，因为您没有ng-model的默认值。设置它，你的空白选项就会消失。

Answer 3

您可能希望在HTML中执行以下操作 -

<select ng-model="regionFilter.region" ng-options="s.value as s.label for s in regionMenu track by s.value">
            <option hidden value="">Show All</option>
</select>

并从JS中删除数组中的“全部显示”项目。

Answer 4

你会检查这个Plunker是你需要的吗？

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <select ng-model="regionFilter.region" ng-options="s.value as s.label for s in regionMenu track by s.label"></select>
  </body>

</html>

我刚刚更新了你的例子。如果你可以分享你的regionFilter.region。您也可以查看example

Angular JS选择菜单项出现两次

4 个答案: