Question

我有一个来自后端的数组，其中包含一个对象数组，这些对象是选择框的选项，让我们说国家选择：

$scope.countries = [
    { name: 'foo', code: 'ba' },
    { name: 'bar', code: 'br' },
    { name: 'biz', code: 'bb' }
];

此数组是原始且可重复使用的，并且可以随时通过可能更改此数组的不同函数进行更新。

但是，我希望selectbox前面加上最初选择的特定实现和特定于实现的选项（因此不会将其添加到countries数组中，以免对其他值的消费者造成污染）：

$scope.defaultCountry = [
    { name: 'Select a country', code: '' }
];

然后我想要这个工作：

<select name="countryCode" model="model.country"
    ng-options="option.code as option.name for option in defaultCountry + countries">

</select>

其中defaultCountry + countries将是2个数组的concat。但是，这个concat不起作用。

我知道我可以调用函数来返回连接值，但如果不需要，我宁愿不要：

$scope.getCountries = function () { 
    return $scope.defaultCountry.concat($scope.countries);
};

<select name="countryCode" model="model.country"
    ng-options="option.code as option.name for option in getCountries()">

</select>

是否有开箱即用的解决方案能够同时使用两个阵列用于ng-options？

Answer 1

这应该做：

<select name="countryCode" model="model.country"
    ng-options="option.code as option.name for option in countries">
    <option value="">-- Select a country --</option>
</select>

Answer 2

在ng-options中使用concat

<select name="countryCode" ng-model="model.country"
ng-options="option.code as option.name for option in defaultCountry.concat(countries)">

</select>

Answer 3

你可以在ng-option之前连接：

<select name="countryCode" model="model.country" ng-init="allCountries=defaultCountry.concat(countries)"
ng-options="option.code as option.name for option in allCountries">
<option value="">-- Select a country --</option>
</select>

连接数组上的ngoptions的角度表达式

3 个答案: