默认分配下拉列表的值

问题描述：

我已在$scope.countries中将当地的国家/地区城市值分配到$scope.countries，并将其传递到后端，现在位于$ scope.getValue（）中我将从后端获取国家/地区城市的值。但我是无法将默认情况下从后端响应中获得的值分配给我的ng型号$scope.countrySrc。默认分配下拉列表的值

<!DOCTYPE html> 
<html data-ng-app="myApp"> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body data-ng-controller="testController"> 



    <label for="country">Country *</label> 
    <select id="country" ng-model="countrySrc" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> 
    <option value=''>Select</option> 
    </select> 
    <label for="state">State *</label> 
    <select id="state" ng-disabled="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()"> 
    <option value=''>Select</option> 
    </select> 
    <label for="city">City *</label> 
    <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc"> 
    <option value=''>Select</option> 

    </select> 

    <script> 
    angular 
     .module('myApp', []) 
     .run(function($rootScope) { 
     $rootScope.title = 'myTest Page'; 
     }) 
     .controller('testController', ['$scope', 
     function($scope) { 


      $scope.countries = { 

      'USA': { 
       'Alabama': ['Montgomery', 'Birmingham'], 
       'California': ['Sacramento', 'Fremont'], 
       'Illinois': ['Springfield', 'Chicago'] 
      }, 
      'India': { 
       'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 
       'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 
       'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] 
      }, 
      'Australia': { 
       'New South Wales': ['Sydney'], 
       'Victoria': ['Melbourne'] 
      } 
      }; 

      $scope.GetSelectedCountry = function() { 
      $scope.strCountry = $scope.countrySrc; 
      }; 
      $scope.GetSelectedState = function() { 
      $scope.strState = $scope.stateSrc; 
      }; 
UserService.getProfile.then(function (response) { 


     $scope.strCountry = response.json.response.profile.country; 
     }; 


    $scope.getProfile(); 
     ]) 
    </script> 
</body> 

</html>

Userservice.jS：从后端

function getProfile(profile){ 
     return $http.post(url+'?request=' + JSON.stringify(profile)).then(handleSuccess, handleError('Error in saving profile details')); 
    }

响应：

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

你的api电话在哪里？你的问题中的“回应”是什么？ – Sravan

你在哪里拨打该服务？ – Sravan

我在userservice.js –

答

向下选民，请阅读下面的所有评论回答第一个，我刚才更新从他的要求引导他。

我已经作出一个plunker为您：请参考吧：Here

angular 
 
    .module('myApp', []) 
 
    .run(function($rootScope) { 
 
    $rootScope.title = 'myTest Page'; 
 
    }) 
 
    .controller('testController', ['$scope', 
 
    function($scope) { 
 

 

 
     $scope.countries = { 
 

 
     'USA': { 
 
      'Alabama': ['Montgomery', 'Birmingham'], 
 
      'California': ['Sacramento', 'Fremont'], 
 
      'Illinois': ['Springfield', 'Chicago'] 
 
     }, 
 
     'India': { 
 
      'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 
 
      'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 
 
      'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] 
 
     }, 
 
     'Australia': { 
 
      'New South Wales': ['Sydney'], 
 
      'Victoria': ['Melbourne'] 
 
     } 
 
     }; 
 

 
     $scope.GetSelectedCountry = function() { 
 
     $scope.strCountry = $scope.countrySrc; 
 
     }; 
 
     $scope.GetSelectedState = function() { 
 
     $scope.strState = $scope.stateSrc; 
 
     }; 
 

 
     $scope.getValues = function() { 
 
     $scope.strCountry = $scope.countrySrc; 
 
     }; 
 
     $scope.getValues(); 
 
    } 
 
    ]);

<!DOCTYPE html> 
 
<html data-ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body data-ng-controller="testController"> 
 

 

 

 
    <label for="country">Country *</label> 
 
    <select id="country" ng-model="countrySrc" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> 
 
    <option value=''>Select</option> 
 
    </select> 
 

 

 
    <label for="state">State *</label> 
 
    <select id="state" ng-disabled="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()"> 
 
    <option value=''>Select</option> 
 
    </select> 
 
    <label for="city">City *</label> 
 
    <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc"> 
 
    <option value=''>Select</option> 
 

 
    </select> 
 

 
</body> 
 

 
</html>

嗨，我明白你的意思，但我所说的问题是，本地我有这个国家的州城市，并将其保存到后端。从后端回来时，该值无法显示在下拉ng模型中。 –

让我来更新我的答案 – Jigar7521

立即检查我已经为此定义了承诺，而不是在工作条件下的适当直接，但是您可以在代码中使用它。 – Jigar7521

答

要指定值下拉默认你需要给它分配给模态选择框。

如果它不起作用，您需要迭代选择框下拉选项并与您的后端保存国家相匹配。然后分配匹配的迭代选项来选择框模式。

默认分配下拉列表的值

相关推荐