Question

我正在尝试使用一个对象数组显示在下拉列表中。这是json文件

{
"list": [
{
"product": "Test1 ",
"Name": "Test 1 Name",
"countries": [{"countryId": 53,"countryName": "Unites States"}]
},
{
"product": "Test 2",
"Name": "Test 2 Name",
 "countries": [{"countryId": 54,"countryName": "Canada"}]
}    
]

}

我想显示一个下拉列表，其中列出了使用countryName在下拉列表中显示的国家/地区，并将countryId用作值。

Answer 1

您应该首先尝试一些代码，如果您未能达到您的目标，请提出问题。

假设您尝试了一些代码，这是一个答案。

使用select as

选择为：

使用select as会将select表达式的结果绑定到模型，但是html元素的值将是集合中值的index (for array data sources)或property name (for object data sources) 。如果使用了跟踪表达式，则该表达式的结果将被设置为选项的值并选择元素。

This is the reference

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<select ng-options="item.countries[0].countryId as item.countries[0].countryName for item in records.list" ng-model="selected">
  <option value="">Select</option>
  </select>


<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = {
"list": [
{
"product": "Test1 ",
"Name": "Test 1 Name",
"countries": [{"countryId": 53,"countryName": "Unites States"}]
},
{
"product": "Test 2",
"Name": "Test 2 Name",
 "countries": [{"countryId": 54,"countryName": "Canada"}]
}    
]

}

});
</script>

</body>
</html>

＆＃13;

Answer 2

查看select documentation。 Angular有几种方法可以进行select输入。

无论如何，您需要将“list”对象保存到JS文件中的$ scope。例如。 $scope.list = [...]

然后，进行选择的一种方法是使用ng-options：

<select ng-options="item.name for item in list track by item.product" ng-model="userChoice"></select>

您的另一个选择是在常规选项标签上使用ng-repeat：

<select ng-model="userChoice">
<option ng-repeat="item in list" value="item.product">{{item.name}}</option>
</select>

这些大致相同，但并不完全相同。您会发现，如果您使用ng-repeat，则很难选择“默认”选项。如果您使用ng-options，则很难添加模型中没有的自定义字段，例如“其他”或“无”。

使用/修改对象数组以在ngRepeat中使用下拉列表

2 个答案: