Question

我是角度js的新手并且学习它。今天我得到了一个代码，使用角度来填充使用JSON的下拉列表。这是代码。

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

角度代码

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"为什么在两个字段名称之间使用。如果我需要指定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”相同，有助于获取所选值

Answer 2

尝试这样。

＆＃13;

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;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
  <select ng-model="selectedCountry" ng-options="item.countryId as item.name for item in chooseCountries">
    <option value="">Select Account</option>
</select>  
</div>

＆＃13;

Answer 3

这可能是因为id和name是在testAccounts范围内的item-array中的字段，从响应到get请求。尝试在控制器逻辑中调试set breakpoint你明白了。

Answer 4

试试这个

<div ng-controller="DemoCtrl" ng-app="main">
  <select ng-model="selectedCountry">
<option value="">Select Account</option>
      <option ng-repeat="x in chooseCountries" value="{{x.countryId}}"  >{{x.name}}</option>
</select>  
</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[1].countryId.toString();   
});

Angular js使用JSON

角度代码

4 个答案: