Question

我有两个ng-repeat问题。我要设置2个选择：

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

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

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

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

在我的模板中：

value="{{ key }}"

如果我只是写<option value="? undefined:undefined ?"></option> <option value="1">Afghanistan </option> ...阿富汗（我的国家列表中的第一个）的值为0，但在我的DB中阿富汗= 1.当我写密钥+ 1时，所有国家都有正确的ID，但是角度创建了像这样的空选项：

$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>

这里的第一个问题是通过索引对我的数组进行角度排序，但我不想要。 Anywhere 必须位于第一位。

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

track by key

如果我没有为应用程序崩溃添加<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>重复问题。但是角度为国家做同样的事情，并创建这样的空选项：

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

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

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

使用ng-options编辑

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

<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>
...

我有这个结果：

saveTextAsFile:function(d)
{
    console.log("data sent is",d);
    var textToWrite = d;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = "testdata.txt";
    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
},

 destroyClickedElement: function(event)
{
    document.body.removeChild(event.target);
}

Answer 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>
```

Answer 2

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

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

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

选择中的ng-repeat创建空行/选项

使用ng-options编辑

2 个答案: