Question

我希望用基本json数组中的值填充select选项。

我的例子是国家选择。每个国家/地区都有一个id元素和一个名称以及我可以忽略的其他字段。基本上我想说一个值放在value=""字段中，另一个值放在<option>tags</option>

之间

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代码段

'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"}
    ];  

});

我把它放在一起 js fiddle ..我想我错过了什么

Answer 1

在上面的示例中，您遗漏了value属性更改此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>

并查看示例click here

Answer 2

angular.module('ui.bootstrap.demo', ['ui.bootstrap']) - 确保你有ui.bootstrap。阅读如何安装http://angular-ui.github.io/bootstrap/
这是您更新的jsfiddle http://jsfiddle.net/e31k5e6L/1/

Answer 3

您错过了value属性，将其更改为country.countryId。

此外，将ng-model指令设置为单个countryId值（或国家ID数组）而不是完整对象。

<select id="Country" name="Country" ng-model ="selectedValue"> 
    <option ng:repeat="country in chooseCountries" value="{{country.countryId}}">
        ...

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"}
    ];  

});

Answer 4

使用对象填充标准select（也可以使用angular-ui-select）的最好方法是使用“ ng-options”指令和使用“ track by id”（{{3} }），这在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>

我必须说，“ vm”是在控制器中定义的“ controllerAs”的情况下，如果直接使用$ scope，则可以删除“ vm”。

这是我发现填充选择字段的最佳方法。

Angularjs用json填充选择选项

4 个答案: