Angular js使用JSON填充下拉列表 [英] Angular js Populate dropdown with JSON

问题描述

我是angular js的新手并正在学习它.今天，我得到了一个代码，用于使用angular使用JSON填充下拉列表.这是代码.

i am new in angular js and learning it. today i got a code to populate dropdown with JSON using angular. here is the code.

<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作为item.testAccounts中项目的名称" 为什么要在两个字段名称之间使用.如果我需要指定3个字段，则代码将类似于 ng-options ="item.Id作为item.Name作为item.Desc用于testAccounts中的item"

this is not clear to me. ng-options="item.Id as item.Name for item in testAccounts" why as is using between two field name. if i need to specify 3 fields then code would look like ng-options="item.Id as item.Name as item.Desc for item in testAccounts"

请帮助我了解 ng-options

还告诉我为什么需要此 selectedTestAccount 吗?

also tell me why this selectedTestAccount required ?

我以这种方式填充下拉菜单，但是第一次在下拉菜单中添加一个空行.....为什么会这样呢?

this way i populate dropdown but first time a empty row is getting added in dropdown.....why it is happening do not understand.

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

second issue is when i select country from dropdown then country id is not showing. here is my code. please have a look and guide me.

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

谢谢

推荐答案

尝试这样.

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

<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>

这篇关于Angular js使用JSON填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！