angularjs - Angular js 使用 JSON 填充下拉列表

Question

我是 Angular JS 新手，正在学习它。今天我得到了一个使用 Angular 来用 JSON 填充下拉列表的代码。这是代码。

<select ng-model="selectedTestAccount" ng-options="item.Id as item.Name for item in testAccounts">
    <option value="">Select Account</option>
</select>

Angular 代码

angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
    $scope.selectedTestAccount = null;
    $scope.testAccounts = [];

    $http({
            method: 'GET',
            url: '/Admin/GetTestAccounts',
            data: { applicationId: 3 }
        }).success(function (result) {
        $scope.testAccounts = result;
    });
});

我不清楚。 ng-options="item.Id as item.Name for item in testAccounts" 为什么在两个字段名称之间使用 as 。如果我需要指定 3 个字段，那么代码将类似于 ng-options="item.Id as item.Name as item.Desc for item in testAccounts"

请帮助我理解ng-options

还告诉我为什么需要这个selectedTestAccount？

这样我填充下拉列表，但第一次在下拉列表中添加空行......为什么会发生这种情况不明白。

第二个问题是当我从下拉列表中选择国家/地区时，国家/地区 ID 未显示。这是我的代码。请看一下并指导我。

<div ng-controller="DemoCtrl" ng-app="main">
 <p>populate select options with ajax</p>

<select name="cboCountry" ng-model="selectedCountry">
<option ng:repeat="facility in chooseCountries" value="{{facility.id}}">{{facility.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 = angular.copy($scope.chooseCountries[0]);
});

谢谢

Answer 1

您也可以使用类似的代码

<select ng-model="selectedTestAccount">
 <option value="">Select Account</option> 
<option ng-repeat="item in testAccounts" value="item.Id">{{item.Name}}    
</option></select>

您想要使用更多可以使用的字段，例如

<select ng-model="selectedTestAccount">
 <option value="">Select Account</option> 
<option ng-repeat="item in testAccounts" value="item.Id">
  {{item.Id}}-{{item.Name}}
</option></select>

这个 selectedTestAccount 的工作方式与 JavaScript 中的“Id”相同，有助于获取选定的值