如何将默认值分配给后端响应的下拉列表

Question

我在我的 html 中有一个本地 $scope.countries 我填充国家城市，但是我需要显示国家状态而不是 select 作为下拉列表中的默认值来自后端的城市值，例如 default.For，阿富汗，巴达克尚。

Plunker 代码在这里。 http://plnkr.co/edit/DPoOFRKGXO28tDXzGe5B?p=preview

<html lang="en-US">
    <head>
        <meta charset="utf-8">

        <link href="css/custom.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    </head>
    <body ng-controller="MainCtrl">
        <form action="#" role="form" class="form-horizontal" id="location" method="post" accept-charset="utf-8">
        <div class="form-group"> 
    <div class="col-sm-4">
        <select name="country" ng-model="model.country" class="form-control countries" id="countryId" required="required">
<option value="">Select Country</option>
</select>
    </div>
</div>
 <div class="form-group"> 
 <div class="col-sm-4">
        <select name="state" ng-model="model.state" class="form-control states" id="stateId" required="required">
<option value="">Select State</option>
</select>
    </div>
</div>
 <div class="form-group"> 
 <div class="col-sm-4">
        <select name="city" ng-model="model.city" class="form-control cities" id="cityId" required="required">
<option value="">Select City</option>
</select>
    </div>
</div>
</form>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script src="app.js"></script>   
    <script src="location.js"></script>

</body>
</html>

JS:

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

   var response = {

               "response":
               {"json":
               {"session_id":"498",
               "profile":{"country":"Afghanistan",
               "state":"Badakhshan","city":"Eshkashem",
               "pincode":"54564",
               "rolemandatory":1},
               "roles":[]}}}

 $scope.getProfile = function () {
                $scope.model.country = response.response.json.profile.country;
                $scope.model.state = response.response.json.profile.state;
                $scope.model.city = response.response.json.profile.city;
            };


});

Answer 1

你写的都是正确的。在上面的代码中我发现了一些错误，

1.you 未在您的 html

中包含 angular

2.your 未设置 model.country model.state 和 model.city 值

3.Bind 选项到 select 框使用 ng-options 并使用 $http

获取数据

4.Even 如果您在完成该功能后使用 jquery 生成选项，请使用 $("#countryId").val(your default value);

更新 select 框

这是有用的链接

https://docs.angularjs.org/api/ng/directive/ngOptions

https://docs.angularjs.org/api/ng/service/$http

Answer 2

多级下拉列表的示例代码。有很多方法可以实现这一点..

function myCtrl($scope) {
    $scope.selectedDist = {};
    $scope.selectedThana = {};
    $scope.districts = [
        {id: 1, name: 'Delhi'},
        {id: 2, name: 'Mumbai'},
        {id: 3, name: 'Chennai'}
    ];

    $scope.thanas = [
        {id: 1, name: 'Mirpur', dId: 1},
        {id: 2, name: 'Uttra', dId: 1},
        {id: 3, name: 'Shahabag', dId: 1},
        {id: 4, name: 'Kotalipara', dId: 2},
        {id: 5, name: 'Kashiani', dId: 2},
        {id: 6, name: 'Moksedpur', dId: 2},
        {id: 7, name: 'Vanga', dId: 3},
        {id: 8, name: 'faridpur', dId: 3}
    ];

    $scope.localeList = [
        {id: 1, name: 'Ulhasnagar', tId: 1},
        {id: 2, name: 'Ambarnath', tId: 1},
        {id: 3, name: 'Kalyan', tId: 5},
        {id: 4, name: 'Vithalvadi', tId: 2},
        {id: 5, name: 'Vikhroli', tId: 6},
        {id: 6, name: 'Kanjurmarg', tId: 2},
        {id: 7, name: 'Ghatkopar', tId: 3},
        {id: 8, name: 'Kamlakar nagar', tId: 3},
        {id: 9, name: 'Kolsewadi', tId: 4},
        {id: 10, name: 'Fort', tId: 7},
        {id: 11, name: 'Gudgava', tId: 8},
        {id: 12, name: 'Mayur Vihar', tId: 8},
        {id: 13, name: 'Chinchpokli', tId: 6}
    ];

    $scope.filterThana = function (thana) {
        return (thana.dId === $scope.selectedDist.id);
    };
    $scope.filterLocale = function (locale) {
        return (locale.tId === $scope.selectedThana.id);
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div ng-app ng-controller="myCtrl">
         <div class="col-xs-6">
            <form class="form-horizontal" name="testForm">
               <div class="form-group">
                  <div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> District List</label></div>
                  <div class="col-md-4">
                     <select class="form-control" name="dist" required ng-model="selectedDist" ng-options="district.name for district in districts">
                        <option value="">Select</option>
                     </select>
                  </div>
               </div>
               <div class="form-group">
                  <div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Thana List</label></div>
                  <div class="col-md-4">
                     <select class="form-control" name="thana" required ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterThana">
                        <option value="">Select</option>
                     </select>
                  </div>
               </div>
               <div class="form-group">
                  <div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Locale List</label></div>
                  <div class="col-md-4">
                     <select class="form-control" name="local" required ng-model="selectedLocale" ng-options="locale.name for locale in localeList | filter: filterLocale">
                        <option value="">Select</option>
                     </select>
                  </div>
               </div>
            </form>
         </div>

      </div>

Answer 3

我建议你为你的数据创建一个 API ..然后查询它并在你的视图中显示它们..在你的控制器中有一个 find() 函数来查询你的 API 和获取值。在 html 视图中调用 ng-init=find() ..

如何将默认值分配给后端响应的下拉列表

how to assign default values to dropdown from backend response

angularjs

angularjs-ng-repeat

angularjs-ng-change