Javascript Angularjs 使用 json 填充选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27636237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs populate select options with json
提问by Robbo_UK
I am looking to populate select option with values from a basic json array.
我希望使用基本 json 数组中的值填充选择选项。
The example I have is a country select. Each country has an id element and a name plus other fields that I can ignore. Basically I would like to say put one value in the value=""field and another between the <option>tags</option>
我的例子是一个国家选择。每个国家/地区都有一个 id 元素和一个名称以及我可以忽略的其他字段。基本上我想说在value=""字段中放置一个值，在字段之间放置另一个值<option>tags</option>
html snippet
html 片段
<div ng-controller="DemoCtrl">
<p>populate select options with ajax</p>
<select id="Country" name="Country" class="form-control" size="10"
ng-model ="chooseCountries">
<option ng:repeat="country in chooseCountries" value="{{country.id}}">
{{country.name}}
</option>
</select>
</div>
javascript snippet
javascript 片段
'use strict';
function DemoSelectCtrl($scope) {
$scope.chooseCountries=[
{countryId : 1, name : "France - Mainland", desc: "some description" },
{countryId : 3, name : "Gibraltar", desc: "some description"},
{countryId : 3, name : "Malta", desc: "some description"}
];
});
I have put it together here js fiddle.. I think I'm missing something
我把它放在一起js fiddle.. 我想我错过了一些东西
采纳答案by user2700840
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])- be sure you have ui.bootstrap. Read how to install it http://angular-ui.github.io/bootstrap/- Here is your updated jsfiddle http://jsfiddle.net/e31k5e6L/1/
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])- 确保你有 ui.bootstrap。阅读如何安装它http://angular-ui.github.io/bootstrap/- 这是您更新的 jsfiddle http://jsfiddle.net/e31k5e6L/1/
回答by vamsikrishnamannem
In this above example you are missing valueattribute change this value="{{country.countryId}}". try this
在上面的示例中，您缺少value属性更改 this value="{{country.countryId}}"。尝试这个
<select id="Country" name="Country" class="form-control" size="10" ng-model ="chooseCountries">
<option ng:repeat="country in chooseCountries" value="{{country.countryId}}">
{{country.name}}
</option>
</select>
and see the example click here
并查看示例单击此处
回答by Muhammad Reda
You miss-typed the valueattribute, change it to country.countryId.
您打错了value属性，请将其更改为country.countryId。
Also, set ng-modeldirective to a single countryId value (or array of country IDs) instead of the full object.
此外，将ng-model指令设置为单个 countryId 值（或国家 ID 数组）而不是完整对象。
<select id="Country" name="Country" ng-model ="selectedValue">
<option ng:repeat="country in chooseCountries" value="{{country.countryId}}">
...
JS:
JS：
function DemoSelectCtrl($scope) {
$scope.selectedValue = 1;
$scope.chooseCountries=[
{countryId : 1, name : "France - Mainland", desc: "some description" },
{countryId : 3, name : "Gibraltar", desc: "some description"},
{countryId : 3, name : "Malta", desc: "some description"}
];
});
回答by hermeslm
The best way to populate a standard select(you can use angular-ui-selecttoo) with objects is to use "ng-options" directive and "ng-repeat" using "track by id" (see AngularJS doc), this works well with ng-model. This is an example of how to use it:
使用对象填充标准选择（您也可以使用angular-ui-select）的最佳方法是使用“ng-options”指令和“ng-repeat”使用“track by id”（参见 AngularJS 文档），这是有效的与 ng-model 很好。这是如何使用它的示例：
<select id="select_field" name="select_field"
ng-model="vm.selectedCountry"
ng-options="country as country.name for country in vm.chooseCountries track by country.countryId">
<option value="">-- Select Country --</option>
</select>
I must say that "vm" is in case of "controllerAs" defined in the controller, if you use the $scope directly, you can remove the "vm".
我必须说“vm”是在控制器中定义的“controllerAs”的情况下，如果直接使用$scope，则可以删除“vm”。
This is the best way that I found to populate a select field.
这是我发现填充选择字段的最佳方式。
