ng-repeat 在选择中创建空行/选项答案

【问题标题】：ng-repeat in a select create empty rows/optionsng-repeat 在选择中创建空行/选项
【发布时间】：2015-09-15 13:09:41
【问题描述】：

我有 2 个关于 ng-repeat 的问题。我正在尝试设置 2 个选择：

一个国家
一个用于所选国家/地区的城市

当我获得国家/地区列表时，我将其转换为可利用的数组并排除第一项。

$scope.country = [];
for (var o in countryList) {
    if(o != 0){
        $scope.country.push(countryList[o]);
    }
}

我排除了第一项，因为在我的系统 0 中，它适用于尚未选择国家/地区的人。所以人们不会完成他们的个人资料。

在我的模板中：

<option ng-repeat="(key, value) in country" value="{{ key+1 }}">{{ value }}</option>

如果我只写value="{{ key }}"阿富汗（我的国家列表中的第一个）的值为 0，但在我的数据库阿富汗 = 1。当我写 key+1 时，所有国家都有正确的 ID，但角度创建一个空选项像这样：

<option value="? undefined:undefined ?"></option>
<option value="1">Afghanistan </option>
...

我对城市也有同样的问题。当我得到我的城市时，我会建立一个数组：

$scope.cities  = [];
$scope.cities[4398] = 'Anywhere';
for (var c in response.data) {
        $scope.cities[response.data[c]['id']] = response.data[c]['name'];
}

它返回这个数组：

[15: "Balkh", 16: "Bamyan", ..., 48: "Zabul", 4398: "Anywhere"]

这里的第一个问题是按索引对我的数组进行角度排序，但我不想要。 任何地方必须放在首位。

第二个问题在我的模板中：

<option ng-repeat="(key, value) in cities track by key" value="{{ key }}">{{ value }}</option>

如果我不添加 track by key 应用程序崩溃以解决重复问题。但是 angular 为国家做同样的事情并创建这样的空选项：

<option value="0" class="ng-binding"></option>
<option value="1" class="ng-binding"></option>
...
<option value="15" class="ng-binding">Balkh</option>
<option value="16" class="ng-binding">Bamyan</option>
...
<option value="48" class="ng-binding">Zabul</option>
<option value="49" class="ng-binding"></option>
...
<option value="4398" class="ng-binding">Anywhere</option>

如何解决“空选项”的问题？

使用 ng-options 编辑

使用 ng-options 我有类似的问题：

for (var o in countryList) {
    if(o != 0){
        $scope.country[o] = countryList[o];
    }
}

// result:
[1: "Afghanistan", 2: ...

模板：

<select ng-model="mySearch.country" ng-options="c for c in country"></select>

我有这个结果：

<option value="?" selected="selected" label=""></option>
<option value="0" label=""></option>
<option value="1" label="Afghanistan">Afghanistan</option>
...

【问题讨论】：

您应该使用ng-options 而不是ng-repeat。

标签： javascript angularjs

【解决方案1】：

您的 $scope.country 和 $scope.cities 是数组，这就是为什么当您不为某些位置提供值时，JavaScript 会用未定义的值填充空白。

考虑这个例子：

var list = [];
list[2] = "foo";
console.log(list);
// prints: [undefined, undefined, "foo"]

要解决此问题，您可以：

使用对象 ({}) -- 然后 Angular 将跳过未明确提供的数字，但它可能会按照您想要的方式对项目进行排序
创建一个列表，其值为具有 key 和 value 属性的对象，如下所示：[{key: 2, value: "foo"}, {key: 5, value: "bar"}] 和 ngRepeat 代替该列表：
```
<option ng-repeat="city in cities" value="{{ city.key }}">{{ city.value }}</option>
```

【讨论】：

我需要一个数组来保证排序顺序，一个对象的顺序是：1、10、100、101，...我将尝试在我的控制器中编写一个正确 ID 的转换器.
在 Angular 1.4 中，对象迭代应该按照添加键的顺序，参见ngRepeat API reference。

【解决方案2】：

因为其他人已经回答了你的大部分问题...... 您不需要选项“Anywhere”在数组中，因为您似乎希望它是 null 选项，您可以像这样将它硬编码到 select 中

<select your select atributes>
    <option value="" >Anywhere</option>
    <option ng-repeat and all that>{{jdsahgkjadsf}}</option
</select

像这样，它将是一个空选项，浏览器会默认选择它

【讨论】：