Angularjs Angular js如何在没有ng选项的情况下使用JSON填充下拉列表

我以这种方式填充下拉列表，数据即将出现，但首次显示下拉列表时未选择任何数据。这是我的密码。请看一看，告诉我哪里出了错

<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="item in chooseCountries" value="item.countryId">
  {{item.countryId}}-{{item.name}}
</option>    
</select>  

<span>Selected country id is {{selectedCountry.countryId}}</span>   
</div>

var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {

    $scope.chooseCountries=[
        {countryId : 1, name : "France - Mainland", desc: "some description" },
        {countryId : 2, name : "Gibraltar", desc: "some description"},
        {countryId : 3, name : "Malta", desc: "some description"}
    ];

    $scope.selectedCountry = $scope.chooseCountries[0].countryId;
});

---

更好的方法是使用ng options指令

<select ng-model="selectedCountry" 
  ng-options="country.countryId as (country.name+'-'+country.desc) for country in chooseCountries">
</select>

但上述内容不适用于您的情况，因为您的countryId字段是数字格式的，当选项将该值指定给value属性时，它将转换为字符串格式。所以在初始加载时，您不会看到countryId绑定到选择框。比较会发生，就像2===2不是真的一样，所以选择框不会选择值，即使您在ng模型中提供了值

你可以找到问题所在

所以为了修复它，您需要通过调用toString方法将该数值转换为字符串值，如下所示

$scope.selectedCountry = $scope.chooseCountries[0].countryId.toString();

通过执行上述更改，选择框在下拉列表中选择提供的countryId值，因为比较发生true 2==2

这就是为什么使用ng选项会更好，因为它保留了值数据类型。基本上，它们工作时不会损害值的数据类型

---

更好的方法是使用ng options指令

<select ng-model="selectedCountry" 
  ng-options="country.countryId as (country.name+'-'+country.desc) for country in chooseCountries">
</select>

但上述内容不适用于您的情况，因为您的countryId字段是数字格式的，当选项将该值指定给value属性时，它将转换为字符串格式。所以在初始加载时，您不会看到countryId绑定到选择框。比较会发生，就像2===2不是真的一样，所以选择框不会选择值，即使您在ng模型中提供了值

你可以找到问题所在

所以为了修复它，您需要通过调用toString方法将该数值转换为字符串值，如下所示

$scope.selectedCountry = $scope.chooseCountries[0].countryId.toString();

通过执行上述更改，选择框在下拉列表中选择提供的countryId值，因为比较发生true 2==2

这就是为什么使用ng选项会更好，因为它保留了值数据类型。基本上，它们工作时不会损害值的数据类型

参考：

---

请参阅：

您应该使用如下ng选项

<select ng-model="selectedCountry" ng-options="country.countryId as country.name for country in  chooseCountries"></select>

---

您应该按如下方式使用ng选项

<select ng-model="selectedCountry" ng-options="country.countryId as country.name for country in  chooseCountries"></select>

---

ngValue not VALUE not VALUE u plzz能否提供js FIDLE？@Mou check添加了plunkryes check，发现您在代码中使用ng选项而不是ng reprater。显示ng报告者的下拉列表。@请查看更新的答案。。。我解释了为什么ng repeat部分不起作用。。如果可以，请执行+1：pcan u plzz provide js fiddle？@Mou check添加了plunkryes check，发现您在代码中使用ng选项而不是ng reprater。显示ng报告者的下拉列表。@请查看更新的答案。。。我解释了为什么ng repeat部分不起作用。。如果可以，请执行+1：请告诉我为什么我们需要这样写字段名country.countryId作为country.name作为chooseCountries中的country为什么我们不能像country.countryId，country.name作为chooseCountries中的country？我认为值，标签在这里不起作用。根据文档，如果源为数组，则以下是在ng选项中使用的选项。对于数组数据源：为数组中的值添加标签，为数组中的值选择“作为标签”，为数组中的值添加逐组标签，为数组中的值添加禁用标签，为数组中的值添加逐组标签，为数组中的值添加逐trackexpr标签，为数组中的值添加禁用标签，数组中值的标签| orderBy:orderexpr track by trackexpr用于包含带有track by的筛选器告诉我为什么需要以这种方式写入字段名称country.countryId作为country.name作为chooseCountries中的country为什么不能像country.countryId，country.name作为chooseCountries中的country？我认为值，标签在这里不起作用。根据文档，如果源为数组，则以下是在ng选项中使用的选项。对于数组数据源：为数组中的值添加标签，为数组中的值选择“作为标签”，为数组中的值添加逐组标签，为数组中的值添加禁用标签，为数组中的值添加逐组标签，为数组中的值添加逐trackexpr标签，为数组中的值添加禁用标签，数组| orderBy中值的标签：orderexpr track by trackexpr用于包含带有track by的筛选器